SASS中的变量范围

Question

假设我想为变量定义一个全局值,然后为特定的选择器覆盖它.根据SASS文件,这应该是可能的.

变量仅在定义它们的嵌套选择器级别内可用.如果它们是在任何嵌套选择器之外定义的,那么它们随处可用.

然后逻辑将声明"绿色"和"红色"作为值$text-color仅在其各自的嵌套选择器中可用,并且$text-color当在其他地方(例如在其中)调用时将采用值"蓝色" .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;
}

理解这一点的任何帮助都会很有帮助.

Answer 1

这是一个老问题,但是对于记录,从版本3.4.0开始,变量现在是块作用域的,除非标记为!global标志.

来自更改日志:

默认情况下,不在文档顶层的所有变量赋值都是本地的.如果存在具有相同名称的全局变量,则除非使用!global标志,否则不会覆盖该变量.例如,$ var:value!global将全局分配给$ var.
可以使用
feature-exists(全局变量阴影)检测此行为.

这意味着scss:

$color: red;

.sel {
  $color: green;
  color: $color;
}

.sel2 {
  color: $color;
}    

现在将生成以下内容css:

.sel {
  color: green;
}

.sel2 {
  color: red;
}

Answer 2

这是因为一旦将变量分配为全局变量,该变量的所有进一步赋值也将全局完成.如果你想后,这地方,你可以做$local-text-color: $text-color;,然后color: $local-text-color;