LESS is the simplier way to write CSS by reducing the code and reusing it. So far we learnt something about LESS in the Part-1 article and this is the continuation of that.
Introduction
In this article, we are going to learn nested rules, performing calculations using operators and functions in LESS-CSS.
Objective
The main objective of this article is how to reduce the code by using nested rules with CSS and what is the use of operators and functions.
Using Nested Rules
By using LESS, we can write cascading rules more easily.
Lets take an example of styling a navigation menu and its links in normal CSS.
ul#menu {
list-style: none;
}
ul#menu li {
display: inline;
margin: 0;
padding: 0;
}
ul#menu li a {
color: #abc;
font-size: 2em;
}
ul#menu li a:hover {
color: #bca;
}In the above code., we are writing separate repeated selectors which are not consistent and not clear.
Using Nested rules of LESS, we can modify the above style as,
ul#menu {
list-style: none;
li {
display: inline;
margin: 0;
padding: 0;
a {
color: #abc;
font-size: 2em;
&:hover { color: #bca; }
}
}
}LESS Compiler will automatically converts the above nested style to the regular CSS. By using above structure, we can have enter sections in a single selector with cascading blocks.
Do you observe the line,
&:hover { color: #bca; }The & (ampersand) is used to avoid the space between selector's parent and the selector.
If we don't give '&' as below,
a {
color: #abc;
font-size: 2em;
:hover { color: #bca; }
}then LESS will produce the following CSS.
a {
color: #abc;
font-size: 2em;
}
a :hover { color: #bca; }And you see the gap(space) between 'a' and ':hover' in the above code snippet that we don't want to happen.
Performing Calculations
Using operators and functions to manipulate the values is very very usable feature in LESS to beautify the styles.
List of operators/functions that we are going to use in LESS are shown in the below table.
| Operator/Function | Description |
| +, -, *, / | Arithmetic operators. |
lighten(@color, z%) | Returns the color value @color, and
lighten's by z percent. |
| darken(@color, z%) | Returns the color value @color, and darken's by z percent. |
| saturate(@color, z%) | Returns the color value @color, and increases
saturation by z percent. |
| desaturate(@color, z%) | Returns the color value @color, and decreases
saturation by z percent. |
| fadein(@color, z%) | Returns the color value @color, and makes z percent
more opaque. |
| fadeout(@color, z%) | Returns the color value @color, and makes z percent
more transparent. |
| spin(@color, z) | Returns the color value @color, shifting the hue by z
degrees on the color wheel. |
| hue(@color) | Returns hue component of the color value @color. |
| saturation(@color) | Returns saturation component of the color value @color. |
| lightness(@color) | Returns lightness component of the color value @color. |
Using Operators
Consider the computation of Heading font-sizes.
@FSize: 4em;
h1 { font-size: @FSize; }
h2 { font-size: @FSize* .8; }
h3 { font-size: @FSize* .6; }
h4 { font-size: @FSize* .4; }
h5 { font-size: @FSize* .2; }In the above Less stylesheet, '*' operator is used to vary the size of Headings manually with multiplication factor.
Using Functions
Consider the computation of colors.
@defaultColour: #642;
h1 { color: @defaultColour; }
h2 { color: lighten(@defaultColour, 10%); }
h3 { color: lighten(@defaultColour, 20%); }
h4 { color: lighten(@defaultColour, 30%); }
h5 { color: lighten(@defaultColour, 40%); }In the above style snippet, Colors of different headings are varied (lightened) by the given percent.
Conclusion
So far we have covered the nested rules, performing operator/function calculations in LESS-CSS. I hope you understand them. If you get any doubt in this chapter, please let me know by commenting below.
In the next chapter, we will see Grouping with namespaces and Importing other CSS files in detail.
Thanks for reading,
Regards,
Krishna.