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