How to use Functions & Operations in LESS CSS

Functions and Operations is the most important feature of LEES CSS. In Operations you can do add, subtract, divide and multiply with the  property values and colors, and giving you the full access to build a complex relationships between properties.And Functions map is designed by one-to-one with JavaScript code. I am going to show you an example of Functions and Operations in LESS CSS.

Example of Function and Operation in LESS:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

When this code will be compiled then you will get this code.

Function and Operation Code after Compiled:

#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

This is the simple usage of Functions and Operation.