插补

插值几乎可以在Sass样式表的任何地方使用，以将SassScript表达式的结果嵌入到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, right)

CSS  输出

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

在SassScript中永久链接在SassScript中

兼容性（现代语法）：
Dart·Sass（Dart Sass）
✓
LibSass
✗
rubySass
自4.0.0起  （未发布）

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

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

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

???? 有趣的事实：

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

Head️抬头！

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

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

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

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

SCSS  语法

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

Sass语法

.example
  unquoted: #{"string"}

CSS  输出

.example {
  unquoted: string;
}

Head️抬头！

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