插值

插值几乎可以在 Sass 样式表中的任何位置使用，以将 SassScript 表达式的结果嵌入到 CSS 代码块中。只需在以下任何位置将表达式包装在 #{} 中

  SCSS

  Sass

  CSS

       游乐场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);

       游乐场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 中在 SassScript 中永久链接

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 自 4.0.0 版（未发布）起

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

插值可用于 SassScript 中，将 SassScript 注入到未带引号的字符串中。当动态生成名称（例如动画）或使用斜杠分隔的值时，这特别有用。请注意，SassScript 中的插值始终返回未带引号的字符串。

  SCSS

  Sass

  CSS

       游乐场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 }
  }
}

       游乐场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 * 1px，而不是编写 #{$width}px——或者更好的是，从一开始就以 px 的形式声明 $width 变量。这样，如果 $width 已经具有单位，您将收到一条不错的错误消息，而不是编译虚假的 CSS。

带引号的字符串带引号的字符串永久链接

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

  SCSS

  Sass

  CSS

       游乐场SCSS 语法.example {
  unquoted: #{"string"};
}

       游乐场Sass 语法.example
  unquoted: #{"string"}

CSS 输出.example {
  unquoted: string;
}

⚠️注意！

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