What is Less.js ?

Less is amazing little tool and followed by reusable and dynamic approach.

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less.js has feature like :-

1.  Variables

2.  Operations

3. Mixims

We can download Less.js  from : http://lesscss.org/#download-options and Add as reference

Declare Variables:-

Deaclare Operation:-

It just like any programming language

@boxHeight:200px

@boxWidht: @boxHeight*2

Declare Mixins:-

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties.

.RoundBorders {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Make it argument able:-

.RoundBorders (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

header {
  .RoundBorders(4px);
}

.button {
  .RoundBorders(6px);
}