Variables in CSS Pre Processor LESS

LESS is a dynamic stylesheet language and extend the capability of CSS. LESS is a CSS pre-processor that helps us to customize, manage and reuse the style sheet for a website. LESS CSS is also a cross-browser friendly.

Variable

Variables can be declared at a single location and access throughout the program or page. with the use of variables code can be optimized.
suppose in CSS we have to declare color repeatedly for each CSS class. rather writing the same CSS again and again simply use variables whether it is class name or property or else.

for eg,

@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

Variable Interpolation

Variables can also be used in selector names, property names, URLs and import statement

@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
//Compiles to:

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

while Providing URL for images  simply set the path in variables and change the file name as per your requirement

@images: "home/images/img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

Lazy Evaluation

Variables should not be declared before being used.

Valid Less snippet:

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;
//this is valid Less too:

.lazy-eval {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;
//both compile into:

.lazy-eval {
  width: 9%;
}

When characterizing a variable twice, the last meaning of the variable is utilized, seeking from the present extension upwards. This is much the same as a CSS where the last property inside a definition is utilized to decide the esteem.

For instance:

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
//Compiles to:
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

each scope has it's "final" value, which is similar to properties in the browser, like this example using custom properties:

.header {
  --color: white;
  color: var(--color);  // the color is black
  --color: black;
 }

This means that, like other CSS pre-processing languages, LESS variables behave very much like CSS's.

Properties as Variables (NEW!)

You can easily treat properties like variables using the $prop syntax. Sometimes this can make your code optimized

.widget {
  color: #efefef;
  background-color: $color;
}
//Compiles to:

.widget {
  color: #efefef;
  background-color: #efefef;
}

Note: Less will choose the last property within the current/parent scope as being the "final" value.

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 
//Compiles to:

.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}

Default Variables

Default variables - an ability to set a variable only if it does not exist. This can be easily overridden variable by putting the definition afterwards.

For instance:

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;

This works fine because of Lazy Loading - @base-color is overridden and @dark-color is a dark red.