1.什么是scss的插值？
在Sass中，我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”，从而来“构造”一个新的选择器名、新的属性名以及新的属性值。
2.语法：
#{变量}
例如：插值用于"选择器名"
@for $i from 1 through 3
{
.item-#{$i}
{
width:10px * $i;
}
}
编译出来的css代码：
.item-1
{
width: 10px;
}
.item-2
{
width: 20px;
}
.item-3
{
width: 30px;
}
例如：插值用于"属性名"
$border:border;
div
{
#{$border}-width:1px;
#{$border}-style:solid;
#{$border}-color:red;
}
编译出来的Css代码如下：
div
{
border-width: 1px;
border-style: solid;
border-color: red;
}
注意：变量只能用于属性值，是不能直接用于属性名的
举例：插值用于“属性值”
@for $i from 1 through 3
{
.item-#{$i}
{
border:#{$i}px solid red;
}
}
编译出来的Css代码如下：
.item-1
{
border: 1px solid red;
}
.item-2
{
border: 2px solid red;
}
.item-3
{
border: 3px solid red;
}
原文地址：https://www.cnblogs.com/hou-yuan-zhen/p/11619224.html