Less.css Framework | Techbirds
Official Website
https://lesscss.org/
LESS a dynamic stylesheet language extends the static CSS by adding a dynamic behavior in the CSS. You can create variables, functions, operations and mixins in the CSS like any language. With the help of this you can reduce the size of the CSS and can also make the changes later easily, as making changes at one place would reflect anywhere you require. LESS CSS is just like a programming language(C,C++ etc) in which you can define our own variable (inline as well as global variable) and can use it in your web 2.0 design for websites. As if now you do it in your present (basic) CSS, if you want to use border-radius or any other CSS which you need to use at ten different places you have to write it ten times due to which the size of the CSS file increases. If you want to make changes at one place then you have to do the same at ten places, that too manually. But in LESS CSS, you can create Mixins (which is similar to function) and can use wherever you want in your web design. You can pass parameter to Mixins as per our requirement. Like any other programming, LESS CSS also provide some built-in functions which we can use to transform colors (as an example). Some of the built-in functions are lighten, darken, saturated etc. If we want to use Javascript in LESS file we can use it by wrapping the expression with back-ticks.
Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.
Operations
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.
Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
Functions
.LESS implements a number of functions to make working with colors easier.
Less installation Including LESS in something that you’re building is about as easy as it gets: 1. Go get yourself a copy of less.js; 2. Create a file to put your styles in, such as style.less;
3. Add the following code to your HTML’s: Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet
How to use variable in less.css @blue: #00c; @light_blue: @blue + #333;
@dark_blue: @blue – #333;
How to use Mixins define in less.css
.rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius;
}
.box{ .rounded-corners;
}
How to define Operations define in less.css
@color: #111; @border-width: 1px;
@base-color: #222;
.box { Border-left: (@border-width*2); Border-color: (@base-color+#003300);
}
.box h2 { Color: (@color*9);
}
.box { Border-left: 2px; Border-color: #225522; } .box h2 { Color: #999;
}https://techbirds.in/wp-admin/profile.php
How to define Nested Rules in less.css
#header{ h1{ Color:#fff; Font-size:28px; Line-height:30px; } a{ Color:#000; Font-size:12px; Text-decoration:none; &:hover{text-decoration:underline;} }
}
532 total views, 1 views today
Share this On
