Less variables

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Variables

Less variables are defined with a symbol @ and the values are assigned in the variable with a colon ( : ). Variables are actually "constants" in that they can only be defined once.

See this example:

  1. @nice-blue: #5B83AD;  

  2. @light-blue: @nice-blue + #111;  

  3. #header {  

  4.   color: @light-blue;  

  5. }   

Here, nice-blue and light-blue are variables and values are assigned to them.

After the compilation, the resulting CSS:

  1. #header {  

  2.   color: #6c94be;  

  3. }  

A list of Less variables:






A variable can be used to avoid the repetition of same value occurred many times.


Variable Interpolation

You can use variables on other places like selector names, property names, URLs and @import statements.


Variable Names

A variable can be defined with a variable name containing a value.


Lazy Loading

Lazy Loading specifies that you can use the variables even though they are not declared yet.


Default Variables

Defaulr variable facilitates you to set a variable only when it?s not already set. It is not a necessary feature because variables can be easily overridden by defining them afterwards.