我在使用Sass变量默认值跨范围时遇到问题。我的测试示例为:
@mixin foo {
$val: 'red' !default;
.bar {
color: $val;
}
}
@include foo;
.class1 {
$val: 'green';
@include foo;
.class11 {
@include foo;
}
}
$val: 'black';
.class2 {
@include foo;
}
.class3 {
$val: 'blue';
@include foo;
}
.class4 {
@include foo;
}
它被编译为:
.bar {
color: "red";
}
.class1 .bar {
color: "red";
}
.class1 .class11 .bar {
color: "red";
}
.class2 .bar {
color: "black";
}
.class3 .bar {
color: "blue";
}
.class4 .bar {
color: "blue";
}
从代码中可以看出,变量$val在mixin foo中被定义为'red' !default。我期望导入这个mixin会将$val设置为'red',除非它已经被定义过了。然而,在class1中,$val被本地定义为'green',导入mixin foo后,它被覆盖为'red'。在其他类中,在全局定义$val为'black'之后,导入mixin的工作方式符合预期,并且$val保留其已定义的值。
我做错了什么?