Mytypings.com

It is a Css pre processor language. less provides many features like variable, operator, mixin etc just like other programming language does. It reduces the Css development time.
 

Install

The following are steps for the LESS installation

Step 1:
Install nodejs and npm

Step 2:
Install less using 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 extention 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 where ever we want. less uses `@` symbol to declare the variable.

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

Operator

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

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

Mixins

Mixin is a block of Css statements that can be used repeatedly in a program. This feature allow 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 a way that follows the same visual hierarchy of our HTML.

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