Переменные можно использовать не только в значениях CSS-свойств, но и как составные части селекторов, названий свойств или как «кусочки» значений свойств. С помощью такой подстановки переменных, или Variable Interpolation, можно динамически формировать разные части CSS-правил.

Чтобы сделать подстановку значения переменной, нужно использовать фигурные скобки вокруг её имени:

Less@state: success;
@property: color;
@icon: "question";
@pixels: 2;

.btn-@{state} {
  background-color: green;
}
.btn-error {
  background-@{property}: red;
}
.btn-help {
  background-image: url("/img/icons/@{icon}.png");
}
.btn-info {
  border: ~"@{pixels}px" solid blue;
}

Из примеров выше скомпилируется такой CSS:

CSS.btn-success {
  background-color: green;
}

.btn-error {
  background-color: red;
}
.btn-help {
  background-image: url("/img/icons/question.png");
}
.btn-info {
  border: 2px solid blue;
}

Кстати, тильда ~ в примере выше нужна для хитрого механизма экранирования Less. Без неё «склеивание» переменной и единицы измерения не сработает.

С помощью «переменных-вставок» можно формировать имена селекторов динамически в зависимости от определённых условий или в цикле. Эти приёмы мы рассмотрим далее в тренажёре.