插值 Interpolation

几乎可以在 Sass 样式表的任何地方使用插值，将 SassScript 表达式的结果嵌入到 CSS 块中。只需在以下任意位置用 `#{}` 包裹一个表达式：

scss

Scss

scss

@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);

In SassScript

兼容性(现代语法): Dart Sass ✓ | LibSass ✗ | Ruby Sass since 4.0.0 (unreleased)

LibSass 和 Ruby Sass 目前使用较旧的语法来解析 SassScript 中的插值。对于大多数实际用途，它的工作原理相同，但它在运算符周围可能表现得很奇怪。有关详细信息，请参阅此文档。

可以在 SassScript 中使用插值将 SassScript 注入 unquoted strings。这在动态生成名称(例如动画)或使用斜杠分隔值时特别有用。请注意，SassScript 中的插值始终返回不带引号的字符串。

scss

Scss

scss

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

💡 有趣的事实：

插值对于将值注入字符串很有用，但除此之外，它在 SassScript 表达式中很少需要。你绝对_不需要_只在属性值中使用变量。不用写 color: #{$accent}，您可以只写 color: $accent！

⚠️ 注意！

使用数字插值几乎总是一个坏主意。插值返回不带引号的字符串，这些字符串不能用于任何进一步的数学运算，并且它避免了 Sass 的内置保护措施以确保正确使用单位。

Sass 具有强大的单位算术，您可以使用它来代替。例如，不要写 #{$width}px，而是写 $width * 1px——或者更好的是，以 px 开头声明 $width 变量。这样，如果 $width 已经有单位，您将收到一条很好的错误消息，而不是编译伪造的 CSS。

带引号的字符串

在大多数情况下，如果将表达式用作属性值，插值会注入完全相同的文本。但有一个例外：带引号的字符串周围的引号被删除(即使那些带引号的字符串在列表中)。这使得编写包含 SassScript 中不允许的语法(如选择器)的引用字符串并将它们插入样式规则成为可能。

scss

Scss

scss

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

⚠️ 注意！

虽然使用此功能将带引号的字符串转换为不带引号的字符串很诱人，但使用 string.unquote() 函数会更清晰。而不是 #{$string}，写 string.unquote($string)！