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 strings - the feature is called string 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.

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 a 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}";
}

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 language requires variables to be declared, but it does not require them to be declared before being used. The variable has to be declared in the current scope. Since this behavior is probably related to the previous point, we will adjust our implementation once two issues mentioned in the above sections close.

This is OK:

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

.lazy-eval {
  width: @var;
}

Lazy loading applies also across scopes:

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

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

compiles into:

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

Not Supported

What is not supported:

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