Question

假设我想为变量定义一个全局值，然后为特定的选择器覆盖它。根据{{3}}，这应该是可能的。

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

然后，逻辑会声明“绿色”和“红色”作为$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标记标记。

来自更改日志：

不在文档顶层的所有变量赋值都是   现在默认为本地。如果有一个相同的全局变量   name，除非使用！global标志，否则不会覆盖它。   例如，$ var：value！global将全局分配给$ var   可以使用
检测此行为   特征存在（全球可变阴影）。

这意味着这个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;

SASS中的变量范围

2 个答案: