Less is the most popular CSS preprocessor that extends plain CSS with programming traits like Variables, Functions or Mixin, and Operation which facilitates you to build modular, scalable, and more manageable CSS styles.

Less syntax is non-standard as per W3C specification. Property declaration in Less is very similar to CSS but it must be placed on its own line and indented. Let's see an example of Less code:

Less code:

  1. @color-base: #2d5e8b;  
  2. .class1 {  
  3.   background-color: @color-base;  
  4.   .class2 {  
  5.     background-color: #fff;  
  6.     color: @color-base;  
  7.   }  
  8. }   

This Less code is processed by compiler and a browser compliant CSS format is generated.

CSS code:

  1. .class1 {  
  2.   background-color: #2d5e8b;  
  3. }  
  4. .class1 .class2 {  
  5.   background-color: #fff;  
  6.   color: #2d5e8b;  
  7. }