Для чего используется конструкция #{переменная} в CSS препроцессорах

Что проверяют

Знаете ли вы, где в Sass нужна интерполяция, а где хватает обычной переменной. Следом часто просят написать цикл, который генерирует классы-модификаторы, или спрашивают, как передать значение Sass-переменной в CSS custom property.

Как отвечать

#{} это интерполяция Sass: она вставляет результат выражения туда, где обычная переменная не подставится или подставится не так:

• селекторы: .btn-#{$name} { ... }. Просто $name в селекторе не раскроется;
• имена свойств: margin-#{$side}: 0 даёт margin-top, margin-left и так далее;
• строки и пути: url("/img/#{$name}.svg"), content: "#{$label}";
• медиазапросы целиком из строки: @media #{$mq-tablet} { ... }. Для отдельного значения вроде (min-width: $bp) переменная работает и без интерполяции;
• custom properties: --color-primary: #{$primary}. Значение кастомного свойства Sass не разбирает, и без интерполяции в CSS уедет буквально текст $primary;
• старый код с calc(): calc(100% - #{$sidebar}). Современный Dart Sass понимает переменные в calc() сам, но этот приём встречается повсюду.

Живой пример это генерация классов в цикле:

@each $name, $color in (primary: $blue, danger: $red) {
  .btn-#{$name} { background: $color; }
}

Отдельно проговорите, что это синтаксис именно Sass. В Less интерполяция пишется как @{var}, а строки экранируют через ~"...", в Stylus свой синтаксис. Актуальный компилятор Sass это Dart Sass, LibSass и node-sass устарели.

Где спотыкаются

Пишут #{primary-color} без знака доллара. Sass подставит слово primary-color, а не значение переменной, и получится класс .button-primary-color.

Интерполируют числа, а потом пытаются с ними считать: #{$a} + 10px. Интерполяция превращает значение в строку без кавычек, и арифметика не выполнится.

Приписывают #{} всем препроцессорам сразу. В Less такой код просто не скомпилируется.