sass-插值

类似于ES6的模版字符串

在一般的情况下,变量只能够作为属性值或者操作数参与运算,比如算数运算或者逻辑运算。如果变量是否可以作为选择器或者属性上?

这样是不被允许的

1
2
3
$attr: background; p {
$attr-color: blue;
}

插值可以简单的理解为 字符串的拼接

1
2
3
p {
#{$attr}-color: blue;
}

下面代码的本来意思是想设置字体大小为12px,行高为30px

1
2
3
4
5
p {
$font-size: 12px;
$line-height: 30px;
font: $font-size/$line-height sans-serif;
}

编译后:

1
2
3
p {
font: 0.4;
}

使用插值就可以方便的解决

1
2
3
p {
$font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height} sans-serif;
}