一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$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; }