css - SASS 中的变量作用域

Question

假设我想为一个变量定义一个全局值，然后为特定的选择器覆盖它。根据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;
}

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

Answer 1

这是一个老问题，但是为了记录，从版本 3.4.0 开始，变量现在是 block 范围的，除非标有 !global 标志。

来自变更日志:

All variable assignments not at the top level of the document are now local by default. If there's a global variable with the same name, it won't be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally.
This behavior can be detected using
feature-exists(global-variable-shadowing).

这意味着这个scss:

$color: red;

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

.sel2 {
  color: $color;
}    

现在将生成以下 css:

.sel {
  color: green;
}

.sel2 {
  color: red;
}