Less Language Selector Interpolation

The selector can reference any variable available in its scope. Variable reference is then replaced by variable value at compile time. This feature is called selector interpolation.

Syntax

Variable name must be placed inside curly braces preceded by at symbol @{variable}. Selector interpolation is not supported everywhere. You can use variable as a part of element name, class name, id and as a pseudo class parameter. Putting it into any other place is not legal.

Simple example:

@headingLevel: 3;
@id: 42;
h@{headingLevel}, #id-@{id}, .class-name-@{id} {
  color: red;
}

Compiled result:

h3, #id-42, .class-name-42 {
  color: red;
}

Strings

If the variable contains string, then the whole string is placed into selector - including its quotation marks.

Sample less:

@singleQuoteString: 'string';
@doubleQuoteString: "string";
@{singleQuoteString} @{doubleQuoteString} {
  margin: 2 2 2 2;
}

compiles into:

'string' "string" {
  margin: 2 2 2 2;
}

Workaround: use values escaping if you need a string but not its quotation marks:

@escapedVariable: ~"h1";
@{escapedVariable} {
  margin: 2 2 2 2;
}

compiles into:

h1 {
  margin: 2 2 2 2;
}

Colors

Named colors are converted into their hex values:

@hexColor: #ff00ff;
@namedColor: green;
Color @{hexColor} @{namedColor} {
  margin: 2 2 2 2;
}

compiles into:

Color #ff00ff #008000 {
  margin: 2 2 2 2;
}

Combined With Mixin

Selector interpolation is especially useful in combination with mixins. Mixin can add almost any kind of dynamically built selectors into its caller:

.mixin(@className) {
  .@{className} {
    padding: 2 2 2 2;
  }
}

pre {
  .mixin(~"java")
}

compiles into:

pre .java {
  padding: 2 2 2 2;
}

TODO mixin with parameter example TODO example not legal and workaround