插值

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

SassScript

兼容性:Dart Sass ✓ |LibSass ✗|Ruby Sass 4.0.0+ 未发布

LibSass和Ruby Sass目前使用较旧的语法来解析SassScript中的插值表达式。在大多数实际应用中,它的工作原理是相同的,但是在操作符周围它会表现得很奇怪。有关详细信息,请参阅本文档

在SassScript中差值可以插入到未引用的字符串中。这在动态生成名称(例如animations)或使用斜杠时特别有用。注意,SassScript中的插值总是返回一个未引用的字符串。

插值将值插入到字符串是非常有用的,但是在SassScript表达式中是很少需要的。在属性值变量中单独使用插值是明显多余的,您可以这样书写color: #{$accent},但最好这样书写color: $accent

不建议使用数字插值。插值返回不带引号的字符串,不能用于任何进一步的数学运算,它避免了Sass的内置安全措施,以确保单位的正确使用。

Sass具有强大的单位算术。例如,相比#{$width}px$width * 1px这样写会更好。如果$width已经有单位,你会得到一个很好的错误信息,而不是编译有bug的CSS。

带引号的字符串

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

虽然很容易使用这个特性将带引号的字符串转换为不带引号的字符串,但是使用unquote()要清楚得多。用unquote($string)代替#{$string}

上次更新: 2019-11-5 4:49:11 PM