插值

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

  • 样式规则中的选择器。
  • 声明中的属性名称。
  • 自定义属性值。
  • CSS 规则。
  • @extends。
  • 纯 CSS @import。
  • 带引号或不带引号的字符串。
  • 特殊函数。
  • 纯 CSS 函数名称。
  • 注释。
scss 语法 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);

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


在 SassScript 中

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

scss 语法 css 语法 
@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 }
  }
}

.pulse {
  animation-name: inline-u6jo6wl9a;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-u6jo6wl9a {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}
插值对于将值注入字符串很有用，但除此之外，它在 SassScript 表达式中很少需要。在属性值中，只使用变量而绝对不需要插值。你可以只写 color:$accent 而不是写 color:#{$accent} 。
⚠️注意！
对插值使用数字，是一个坏主意。插值返回未加引号的字符串，所以不能用于任何数学运算，它避免了 Sass 的内置保护措施，以确保正确使用单位。
Sass 具有强大的单位算法，您可以使用它来代替。例如，不要写 #{$width}px ，而是，开始根据 px ，声明 $width 变量，然后写 $width * 1px 。这样，如果 $width 已经有单位，你会得到一个的错误消息提示，而不是编译虚假的 CSS。


带引号的字符串

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

scss 语法 css 语法 
.example {
  unquoted: #{"string"};
}

.example {
  unquoted: string;
}
⚠️注意！
虽然使用此功能，将带引号的字符串转换为不带引号的字符串，很诱人，但使用该 string.unquote() 函数，会更加清晰。所以要写 string.unquote($string) ，而不是 #{$string}

上篇： 变量