翻译:SASS: interpolation in a name of variable
问题
使用 Sass 的时候,我们可能在某些场景下使用到字符串模板,如:
@mixin set-border($side) {
border-#{$side}: solid 1px #000;
}
.header {
@include set-border("top");
}
这些会编译成:
.header { border-top: solid 1px #000; }
这里主要是想在使用变量的同时去渲染不一样的 CSS 属性。但是现在 Sass 还不允许直接在 Mixin 和变量名中直接用字符串模板。如:
$bg-dark: #000;
$bg-white: #FFF;
@mixin set-styles($arg) {
background-color: $bg-#{$arg};
}
.header {
@include set-styles("dark");
}
编译后的结果是:
Sass Error: Undefined variable: "$bg-".
解决方法
对于上面的情况你可以使用 placeholder 去解决。可以在 placeholder 上使用字符串模板。所以你可以需要的是定义 placeholder,而不是变量。
%bg-dark {
background-color: #000;
}
%bg-white{
background-color: #FFF;
}
@mixin set-styles($arg) {
@extend %bg-#{$arg};
}
.header {
@include set-styles("dark");
}
编译后的结果是:
.header { background-color: #000; }