Sass: 变量名中使用字符串模板

翻译：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; }