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