插值
插值几乎可以在 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}