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:
Here, nice-blue and light-blue are variables and values are assigned to them.
After the compilation, the resulting CSS:
A list of Less variables:
||A variable can be used to avoid the repetition of same value occurred many times.
||You can use variables on other places like selector names, property names, URLs and @import statements.
|| A variable can be defined with a variable name containing a value.
||Lazy Loading specifies that you can use the variables even though they are not declared yet.
||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.