Строки, экранирование и интерполяция

Иногда значение нужно передать в CSS как есть, не давая Less его разбирать и считать. Для этого служит экранирование — запись ~"...". А чтобы вставить переменную в селектор, имя свойства или строку, используется интерполяция @{имя}.

Экранирование ~"..."

Less пытается понять любое значение. Если в нём есть то, чего Less не знает, компиляция падает. Строка с тильдой выводится без кавычек и без обработки:

// styles/main.less
@phone: ~"(max-width: 599px)";
 
.menu {
  @media @phone {
    display: none;
  }
}

@media (max-width: 599px) {
  .menu {
    display: none;
  }
}

Условие медиазапроса хранится в переменной и вставляется целиком. Тильда убрала кавычки, иначе в CSS попало бы @media "(max-width: 599px)".

Интерполяция в селекторах и свойствах

Чтобы вставить переменную в имя класса или свойства, оберните её имя в фигурные скобки: @{имя}.

// styles/components/buttons.less
@prefix: app;
@side: left;
 
.@{prefix}-btn {
  margin-@{side}: 8px;
}

.app-btn {
  margin-left: 8px;
}

Так библиотеки позволяют сменить префикс всех классов одной переменной. В Sass то же самое пишется как #{$prefix}.

Интерполяция в строках

Внутри строки в кавычках работает та же запись — удобно для путей к файлам:

// styles/main.less
@images: "/assets/images";
 
.hero {
  background-image: url("@{images}/hero.jpg");
}

.hero {
  background-image: url("/assets/images/hero.jpg");
}

Строковые функции

Функция	Что делает	Пример	Результат
`e()`	То же, что `~"..."`	`e("a b")`	`a b`
`%()`	Подставляет значения вместо `%s` и `%d`	`%("%d of %d", 2, 5)`	`"2 of 5"`
`replace()`	Заменяет часть строки	`replace("one two", "two", "three")`	`"one three"`
`escape()`	Кодирует символы для URL	`escape("a=1")`	`a%3D1`

Пример с %() — текст счётчика в псевдоэлементе:

// styles/components/cards.less
@total: 5;
 
.card::after {
  content: %("1 / %d", @total);
}

.card::after {
  content: "1 / 5";
}

<style>
  .card::after {
    content: "1 / 5";
  }
</style>
 
<div class="card">Первая карточка</div>

После текста карточки псевдоэлемент выводит 1 / 5.

Частая ошибка

Без тильды переменная со строкой попадает в CSS вместе с кавычками:

// styles/main.less
@phone: "(max-width: 599px)";
 
@media @phone {
  .menu {
    display: none;
  }
}

@media "(max-width: 599px)" {
  .menu {
    display: none;
  }
}

Браузер не понимает условие в кавычках, и правило не работает. Значения, которые должны попасть в CSS как код, а не как текст, записывайте через ~"...".

Спасибо, что читаете!