Mytypings.com

Before explaining what is LESS and how to install less, please make sure we know the HTML and CSS. Then only it will be useful and meaningful for you to know
how using less makes our job easy.

LESS is a CSS pre-processor that gives us the flexibility to write a customizable, manageable and reusable style sheet for our website and web applications. So we can say
LESS is a dynamic stylesheet language that extends the capability of CSS. One of the important thing about LESS is that it is cross-browser friendly.

It too provides features like a variable, operator, mixin etc just like other programming language does. It reduces the CSS development time.

Install

The following are steps to install LESS

Step 1:

First of all, we should have nodejs installed so that we can use npm (node package manager), the following command can be used to install nodejs.

Step 2:

Now we can use npm to install less with the following command

 npm install -g less  

Step 3:
Following is a sample command for converting the less file to CSS file. For that first create a file with .less extension and add the less code.

 @bodycolor: #333;   
 body{    
   color: @bodycolor;     
 }  

Features of LESS

Variable

Variables are used to store some information, which can be used in our code wherever we want. Less uses `@` symbol to declare the variable.

// Variables 
  @images: "../img"; 
// Usage 
  body {
     color: #444;
     background: url("@{images}/white-sand.png");
  }

Operator

Less provides basic mathematical operators like +, -, *, / and %. Those are very much useful in CSS styling process.

 .divwidth{   
    width: 900px / 360px;    
}

Mixins

A mixin is a block of CSS statements which can be used repeatedly in a program. This feature allows us to reduce the repeated Css codes. Using `#` symbol we can create mixin.

 #box($wdvar) {   
   width: $wdvar;   
 }  
 .smallbox {  
   #box(10px);  
 }    
 .largebox {  
   #box(100px);  
 }  

Nesting

Less allow us to nest our CSS selectors in visual hierarchy of our HTML.

 .classone{    
  font-color: blue;   
  a{    
    text-decoration: none;   
   }  
 }