Less Language Variables

Variables are named values. Each number, color, string or any value can be assigned to a variable and the rest of the sheet then references variable instead of the original value. This makes style sheet maintenance much easier - use them right and each color or margin change will done on one place only. Searching through all style sheet to change all 'blue' into new main theme color is not needed anymore.

Variables can be used:

• as property values,
• inside property names - the feature is called property name interpolation,
• inside strings - the feature is called string interpolation,
• inside imports file locations - the feature is called import interpolation,
• as part of selectors - the feature is called selector interpolation,
• as part of media queries - the feature is called media query interpolation.

Less variables have two additional features worth to know about:

• lazy loading - variables must be declared, but not necessary before being used,
• last declaration wins strategy - variable value is replaced by the last declared value within the same scope.

The idea behind these two features was to keep less language behavior as close to css language behavior as possible. Css is declarative language and if the same property is defined twice, the final page will use the value of the last one. Therefore, less have been designed as declarative language too and its variables mimic this css properties.

Defining a Variable

Use @<variable name>: <variable value> syntax to define a variable. Variable names are case sensitive and their values can contain any valid css or less value: a number, a string, a list or an escaped value.

Examples:

• @list: 10 12;
• @string: "double quote";
• @differentString: "single quote";

Using a Variable

Variables can be used either directly, as a reference, inside a string or to generate parts of style sheet structure.

Directly

Use @<variable name> syntax to use variable value directly:

@number: 10;
h1 {
  size: @number;
} 

compiles into

h1 {
  size: 10;
} 

As Reference

If the variable contains a string, then it can act as a reference to another variable. Use @<variable name> syntax to use variable value indirectly:

@number: 10;
@reference: "number";
h1 {
  size: @@reference;
} 

Inside Property Name

Variables can be used inside declarations as parts of property names. The @{variable} inside property name is replaced by @variable value.

Sample input:

@property-name: border-radius;

#prefixed {
  -webkit-@{property-name}:15px;
  -moz-@{property-name}:15px;
  @{property-name}:15px;
}

Compiled css:

#prefixed {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

Inside String

Use @{variable} syntax inside string to use variable value. If variable variable exists, the expression is replaced by variable value. If parentheses does not contain valid variable name, the expression is left as it is.

This feature is called string interpolation and its details are explained on separate wiki page.

Sample input:

@variable: 32;
#stringInterpolation {
  text: "@{variable} @{not a variable name}";
}

Compiled css:

#stringInterpolation {
  text: "32 @{not a variable name}";
}

The same @{variable} syntax works also inside @import rules. Details and limitations are described on separate page. Sample input:

@file: "file";
@import "@{file}.less";
@import url("@{file}.less");

Style Sheet Structure

Finally, variables can be used to hold parts of selectors and media queries. Since both of these features are explained on separate pages, we will show only one use case:

@mediaQuery: screen;
@media @mediaQuery { // use normal syntax to place variable value inside media
  @level: 3;
  h@{level} { // use interpolation syntax to place variable value inside selector
    color: red;
  }
}

compiles into:

@media screen {
  h3 {
    color: red;
  }
}

Last Declaration Win - Even After Use

Less.js uses last declaration wins strategy. Variable value is replaced by the last declared value withing the same scope - even if the declaration was written after variable usage. Otherwise said, variables are officially constants and their value should be defined only once.

Example Input:

@a: 100%;
@var: @a;

.lazy-eval {
  width: @var;
}

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

Less.js output:

.lazy-eval {
  width: 50%;
}
.lazy-eval two {
  width: 50%;
}

Lazy Loading

Less variables are lazy loaded and do not have to be declared before being used.

Valid less snippet:

lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

this is valid less too:

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

@var: @a;
@a: 100%;

both compile into:

.lazy-eval-scope {
  width: 9%;
}

Not Supported

What is not supported:

• triple indirection (@@@variable),
• Nth as a variable value (@variable:3n+2).