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

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

SCSS Syntax

@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 Syntax

@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, right)

CSS Output

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

В SassScript permalinkВ SassScript

Совместимость (Modern Syntax):
Dart Sass
✓
LibSass
✗
Ruby Sass
since 4.0.0 (unreleased)

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

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

SCSS Syntax

@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 Syntax

@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 Output

.pulse {
  animation-name: inline-uxy9kde8a;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uxy9kde8a {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

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

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

⚠️ Внимание!

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

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

Процитированные строки permalinkПроцитированные строки

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

SCSS Syntax

.example {
  unquoted: #{"string"};
}

Sass Syntax

.example
  unquoted: #{"string"}

CSS Output

.example {
  unquoted: string;
}

⚠️ Внимание!

While it’s tempting to use this feature to convert quoted strings to unquoted strings, it’s a lot clearer to use the string.unquote() function. Instead of #{$string}, write string.unquote($string)!