自学教程插值几乎可以在Sass样式表的任何地方使用，以将SassScript表达式的结果嵌入到CSS 块中。只需将表达式包装#{}在以下任意位置：
- 样式规则中的选择器
- 声明中的属性名称
- 自定义属性值
- CSS 规则
- @extends
- 纯CSS @import
- 带引号或不带引号的字符串
- 特殊功能
- 纯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);编译为 CSS 结果：
CSS
.icon-mail {
background-image: url("/icons/mail.svg");
position: absolute;
top: 0;
left: 0;
}
在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 }
}
}编译为 CSS 结果：
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不允许的语法（例如选择器）的带引号的字符串，并将其插入样式规则中。
SCSS
.example {
unquoted: #{"string"};
}编译为 CSS 结果：
CSS
.example {
unquoted: string;
}
分享笔记