是否可以在sass中将空字符串设置为类选择器？

Question

我有一个变量，它将空字符串作为默认值，并且可以根据肤色名称动态更改。所以我试着像这样编写我的sass选择器。

default.scss：

$skin: '';

green.scss：

$skin: 'green';

main.scss：

@import 'default.scss';
.#{$skin} .header{
    color: black;
}

所以我期望从生成的CSS得到以下输出。

.header{
  color: black;
}

和

.green .header{
   color: black;
}

但是在编译时它会抛出错误 “。”之后的CSS无效：预期的类名称是“.header”

Answer 1

你可以使用一个函数：

$skin: 'green';
@function skin(){ 
    @if $skin != '' { @return '.' + $skin + ' '; } 
    @else { @return ''; }
}

现在你可以像这样使用它：

#{skin()} .header { ... }

将输出：

.green .header { display: block; }

使用更好的全局变量名称可能会更好（皮肤看起来像是可以快速重用的东西 - 我会建议像$global-skin-name之类的东西，但那只是语义）。