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:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
} 

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

After the compilation, the resulting CSS:

#header {
  color: #6c94be;
}

A list of Less variables:

Index	Variable	Explanation
1)	Overview	A variable can be used to avoid the repetition of same value occurred many times.
2)	Variable Interpolation	You can use variables on other places like selector names, property names, URLs and @import statements.
3)	Variable Names	A variable can be defined with a variable name containing a value.
4)	Lazy Loading	Lazy Loading specifies that you can use the variables even though they are not declared yet.
5)	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.