Lzh on GitHub

插值

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

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

  • 样式规则中的选择器
  • 声明中的属性名
  • 自定义属性值
  • CSS at-rules
  • @extends
  • 普通 CSS @imports
  • 带引号或不带引号的字符串
  • 特殊函数
  • 普通 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);

在 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 }
  }
}
插值对于将值注入字符串很有用，但除此之外，它在 SassScript 表达式中很少是必需的。你绝对不需要它来仅仅在属性值中使用变量。不要写 color: #{$accent}，你只需写 color: $accent！
在数字上使用插值几乎总是一个坏主意。插值返回无法用于任何进一步数学运算的无引号字符串，并且它避免了 Sass 内置的用于确保单位正确使用的保护措施。Sass 拥有强大的单位算术，你可以用它来代替。例如，不要写 #{$width}px，写 $width * 1px——或者更好的是，在一开始就用 px 来声明 $width 变量。这样，如果 $width 已经有单位，你就会得到一个很好的错误消息，而不是编译出无效的 CSS。

带引号的字符串

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

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