插值

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

Playground

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

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, left)

CSS Output

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

在 SassScript 中在 SassScript 中 permalink

¥In SassScript

兼容性 (Modern Syntax):
Dart Sass
✓
LibSass
✗
Ruby Sass
since 4.0.0 (unreleased)

LibSass 和 Ruby Sass 当前使用较旧的语法来解析 SassScript 中的插值。对于大多数实际用途，它的工作原理是相同的，但它在 运算符 周围的行为可能会很奇怪。详情请参见 这个文件。

¥LibSass and Ruby Sass currently use an older syntax for parsing interpolation in SassScript. For most practical purposes it works the same, but it can behave strangely around operators. See this document for details.

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

¥Interpolation can be used in SassScript to inject SassScript into unquoted strings. This is particularly useful when dynamically generating names (for example for animations), or when using slash-separated values. Note that interpolation in SassScript always returns an unquoted string.

Playground

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

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-uifpe6h;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uifpe6h {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

💡 Fun fact:

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

¥Interpolation is useful for injecting values into strings, but other than that it’s rarely necessary in SassScript expressions. You definitely don’t need it to just use a variable in a property value. Instead of writing color: #{$accent}, you can just write color: $accent!

⚠️ Heads up!

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

¥It’s almost always a bad idea to use interpolation with numbers. Interpolation returns unquoted strings that can’t be used for any further math, and it avoids Sass’s built-in safeguards to ensure that units are used correctly.

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

¥Sass has powerful unit arithmetic that you can use instead. For example, instead of writing #{$width}px, write $width * 1px—or better yet, declare the $width variable in terms of px to begin with. That way if $width already has units, you’ll get a nice error message instead of compiling bogus CSS.

引用的字符串引用的字符串 permalink

¥Quoted Strings

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

¥In most cases, interpolation injects the exact same text that would be used if the expression were used as a property value. But there is one exception: the quotation marks around quoted strings are removed (even if those quoted strings are in lists). This makes it possible to write quoted strings that contain syntax that’s not allowed in SassScript (like selectors) and interpolate them into style rules.

Playground

SCSS Syntax

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

Sass Syntax

.example
  unquoted: #{"string"}

CSS Output

.example {
  unquoted: string;
}

⚠️ Heads up!

虽然使用此功能将带引号的字符串转换为不带引号的字符串很诱人，但使用 string.unquote() 函数。不要写 #{$string}，而是写 string.unquote($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)!