假设我想为变量定义一个全局值,然后为特定的选择器覆盖它.根据
SASS documentation,这应该是可能的.
Variables are only available within the level of nested selectors where they’re defined. If they’re defined outside of any nested selectors,they’re available everywhere.
然后,逻辑将声明“绿色”和“红色”作为$text-color的值仅在其各自的嵌套选择器中可用,并且$text-color在其他任何地方调用时将采用值“blue”,例如在.foo内.
$text-color: blue;
.green {
$text-color: green;
color: $text-color;
}
.red {
$text-color: red;
color: $text-color;
}
.foo {
color: $text-color;
}
但是,情况并非如此,上述SASS编译为：
.green {
color: green;
}
.red {
color: red;
}
.foo {
color: red;
}
任何理解这一点的帮助都会很有帮助.
解决方法
这是因为一旦您将变量指定为全局变量,该变量的所有进一步赋值也将全局完成.如果你想在那之后使它成为本地,你可以做$local-text-color：$text-color;然后着色：$local-text-color;
