Working with Nested Rules, Operators and Functions in LESS

Goud.Kv
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 7825 red flag

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.
Recommendation
Read Introduction to LESS in CSS before this article.

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/FunctionDescription
+, -, *, /Arithmetic operators.
lighten(@color, z%)Returns the color value @color, and
 lighten's by z percent.
darken(@colorz%)Returns the color value @color, and darken's by z percent.
saturate(@colorz%)Returns the color value @color, and increases
saturation by z percent.
desaturate(@colorz%)Returns the color value @color, and decreases 
saturation by z percent.
fadein(@colorz%)Returns the color value @color, and makes z percent
more opaque.
fadeout(@colorz%)Returns the color value @color, and makes z percent
more transparent.
spin(@colorz)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.



Recommendation
Read Working with Grouping, Importing and Escaping in LESS after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)