Интерполяция

Интерполяция может быть использована практически в любом месте в стиле Sass для вставки результата выражения SassScript в фрагмент CSS. Просто оберните выражение в #{} в любом из следующих мест:

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);
// SASS
@mixin corner-icon($name, $top-or-bottom, $left-or-right)
  .icon-#{$name}
    background-image: url("/icons/#{$name}.svg")
    position: absolute
    #{$top-or-bottom}: 0
    #{$left-or-right}: 0



@include corner-icon("mail", top, left)
/* CSS */
.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

В SassScript

Dart Sass: ✓
LibSass: ✗
Ruby Sass: с версии 4.0.0 (не выпущено)

LibSass и Ruby Sass в настоящее время используют более старый синтаксис для разбора интерполяции в SassScript. В большинстве практических случаев он работает так же, но может вести себя странно вокруг операторов. Подробности см. в этом документе.

Интерполяция может быть использована в SassScript для вставки SassScript в нецитируемые строки. Это особенно полезно при динамическом генерировании имён (например, для анимаций) или при использовании значений, разделённых косой чертой. Обратите внимание, что интерполяция в SassScript всегда возвращает нецитируемую строку.

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}
// SASS
@mixin inline-animation($duration)
  $name: inline-#{unique-id()}

  @keyframes #{$name}
    @content


  animation-name: $name
  animation-duration: $duration
  animation-iteration-count: infinite


.pulse
  @include inline-animation(2s)
    from
      background-color: yellow
    to
      background-color: red
/* CSS */
.pulse {
  animation-name: inline-uifpe6h;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uifpe6h {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

💡 Интересный факт:

Интерполяция полезна для вставки значений в строки, но помимо этого она редко необходима в выражениях SassScript. Вам определенно не нужно её использовать, чтобы просто использовать переменную в значении свойства. Вместо color: #{$accent} можно просто написать color: $accent!

Практически всегда не рекомендуется использовать интерполяцию с числами. Интерполяция возвращает нецитируемые строки, которые не могут быть использованы для дальнейших математических операций, и она избегает встроенных средств Sass для обеспечения правильного использования единиц.

Sass обладает мощной арифметикой единиц, которую можно использовать вместо этого. Например, вместо #{$width}px напишите $width * 1px — или, что ещё лучше, объявите переменную $width с точки зрения px с самого начала. Таким образом, если у $width уже есть единицы, вы получите приятное сообщение об ошибке вместо компиляции бессмысленного CSS.

Строки в кавычках

В большинстве случаев интерполяция вставляет точно такой же текст, который был бы использован, если бы выражение было использовано в качестве значения свойства. Но есть одно исключение: кавычки вокруг строк в кавычках удаляются (даже если эти строки в кавычках находятся в списках). Это позволяет создавать строки в кавычках, содержащие синтаксис, который недопустим в SassScript (например, селекторы), и интерполировать их в правила стилей.

.example {
  unquoted: #{"string"};
}
// SASS
.example
  unquoted: #{"string"}
/* CSS */
.example {
  unquoted: string;
}

Хотя может быть соблазнительно использовать эту функцию для преобразования строк в кавычках в строки без кавычек, гораздо яснее использовать функцию string.unquote(). Вместо #{$string} напишите string.unquote($string)!

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/interpolation