SASS插值表达式用法介绍 _SASS

插值基本上是插入。插值允许我们将sass表达式插值到简单的SASS或CSS代码中。意思是, 你可以定义(部分或全部)选择器名称, 属性名称, CSS规则, 带引号或不带引号的字符串等, 作为变量。插值是一种新原理, 在SASS中被广泛使用。
要插入表达式, 我们需要使用＃{}包装表达式。
【SASS插值表达式用法介绍】语法如下：

......#{$variable_name}........

…..代表一些文本。
请参阅下面的示例以了解更多信息：
SASS文件：

@mixin interpolation($changeable, $val, $val2, $prop1, $prop2){background-#{$changeable}: $val; position: $val2; #{$prop1}: 0px; #{$prop2}: 0px; }.blockarea{@include interpolation("image", url("img.png"), absolute, top, right); }.anotherbloakarea{@include interpolation("color", lightgray, absolute, top, left); }

编译的CSS文件：

.blockarea {background-image: url("img.png"); position: absolute; top: 0px; right: 0px; }.anotherbloakarea {background-color: lightgray; position: absolute; top: 0px; left: 0px; }

SASS表达式中的插值始终返回未加引号的字符串, 无论该字符串是否已加引号。
插值的用途：