Scss插值语句

1. 插值语句

通过 #{} 插值语句可以在选择器、属性名、注释中使用变量，使用#{}插值语句将变量包裹起来即可 和js中的模板字符串很像。

$font-size: 12px;
$line-height: 30px;
$class-name: danger;
$attr: color;
$author: "福大命大";
p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}
/* 
* 这是文件的说明部分
* @author: #{$author}
*/
a.#{$class-name} {
    border-#{$attr}: #f00;
}

编译成css

p {
    font: 12px/30px Arial Helvetica, sans-serif;
}
/* 
* 这是文件的说明部分
* @author: 福大命大
*/
a.danger {
    border-color: #f00;
}