scss-#{}插值

　　一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用。

　　例如：scss代码

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
// 应用于 class 和属性
.border-#{$borderDirection} {
    border-#{$borderDirection}: 1px solid #ccc;
}
// 应用于复杂的属性值
body {
    font:#{$baseFontSize}/#{$baseLineHeight};
}

　　编译后的css代码：

.border-top {
    border-top:1px solid #ccc;
}
body {
    font: 12px/1.5;
}

 

转载于:https://www.cnblogs.com/ibabyli/p/9871200.html