我尝试为命名空间设置不同的背景颜色，为此我使用这样的 css 变量和类
CSS
body.workspace {
$backgroundColor: #f1f4fa !default;
&.admin {
$backgroundColor: #e4daec;
}
}
HTML
<body class="workspace #{namespace}">
...
</body>
如果需要，命名空间设置为
admin但是
$backgroundColor也许我必须使用 2 个不同的变量？
你至少有两个选择。您可以使用两个不同的变量：
$backgroundColor_one: #f1f4fa;
$backgroundColor_two: #e4daec;
body.workspace {
background-color: $backgroundColor_one;
&.admin {
background-color: $backgroundColor_two;
}
}
或者您可以使用带有 if 语句的 @mixin，如下所示：
@mixin backgroundColor($val){
@if $val == one {
color: #f1f4fa;
}
@else if $val == two{
color: #e4daec;
}
}
body.workspace {
@include backgroundColor(one);
&.admin{
@include backgroundColor(two);
}
}