SASS |插值

插值基本上是一种插入。插值允许我们将 sass 表达式插入到简单的 SASS 或 CSS 代码中。意味着，您可以将(部分或全部)选择器名称、属性名称、CSS 规则、带引号或不带引号的字符串等定义为变量。插值是一种新的原理，在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 表达式中的插值总是返回一个不带引号的字符串，无论字符串是否被引用。

插值的用途：

1. 将动态创建的名称用作属性名称、变量名称或用于任何其他相同目的。
2. 创建一个非常可重用的代码；您可以在其中定义属性名称、字符串、选择器名称等作为变量。