我有一个变量，该变量的默认值为空字符串，可以根据外观名称动态更改它。所以我试图这样写我的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”
您可以为此使用一个函数：
$skin: 'green';
@function skin(){
@if $skin != '' { @return '.' + $skin + ' '; }
@else { @return ''; }
}
现在您可以像这样使用它：
#{skin()} .header { ... }
将输出：
.green .header { display: block; }
最好使用更好的全局变量名称（皮肤似乎可以快速重用-我建议使用$global-skin-name或之类的东西，但这仅是语义）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句