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}. 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.

Valid placements example:

@headingLevel: 3;
@headingPosition: 1;
@id: 42;
h@{headingLevel}:nth-child(@{headingPosition}), #id-@{id}, .class-name-@{id} {
  color: red;
}

Compiled result:

h3:nth-child(1), #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;
}

Illegal Examples and Workarounds

Selector interpolation is supported only inside element names, class names, ids and as a pseudo class parameters. their usage anywhere else is illegal.

Illegal selector interpolation, causes compile error:

@pseudoClass: ~"nth-child";
//illegal selector
h3:@pseudoClass(2) {
  color: red;
}
//another illegal selector
@variable: "text";
h1[text=@{variable}] {
  padding: 2 2 2 2;
}

If anyone ever needs it, this limitation has a simple workaround. Just place the whole "illegal" part into an escaped variable:

@pseudoClass: ~"nth-child";
//workaround
@fullPseudo: ~":@{pseudoClass}(2)";
h3@{fullPseudo} {
  color: red;
}
//workaround
@variable: "content";
@attribute: ~'[text="@{variable}"]';
h1@{attribute} {
  padding: 2 2 2 2;
}

compiles into:

h3:nth-child(2) {
  color: red;
}
h1[text="content"] {
  padding: 2 2 2 2;
}