SASS中的变量作用域

Question

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

引用：

变量仅在定义它们的嵌套选择器级别内可用。如果它们在任何嵌套选择器之外定义，则可以在任何地方使用。

逻辑上讲，“绿色”和“红色”作为$text-color的值仅在各自的嵌套选择器中可用，而在任何其他地方调用$text-color时，例如在.foo中，$text-color将取一个“蓝色”的值。

$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;
}

任何帮助理解这个的都会很有帮助。

- Chris Brauckmuller

Answer 1

这是一个老问题，但据记录，在版本3.4.0中，变量现在是块级作用域，除非标记了!global标志。

从changelog中可以看出：

默认情况下，所有不在文档顶层的变量赋值都是局部的。如果有同名的全局变量，则不会被覆盖，除非使用!global 标志。例如，$var: value !global 将全局分配给 $var。
可以使用 feature-exists (global-variable-shadowing) 来检测此行为。

这意味着这个scss代码：

$color: red;

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

.sel2 {
  color: $color;
}    

现在将生成以下css：

.sel {
  color: green;
}

.sel2 {
  color: red;
}

- TxH

Answer 2

这是因为一旦您将变量分配为全局变量，所有对该变量的进一步分配也会全局执行。如果您想在此之后将其设置为局部变量，可以执行$local-text-color: $text-color;，然后color: $local-text-color;。

- Andy

---

@ChrisBrauckmuller：当然有意义。除非你试图编写可能在其他项目中使用的代码！突然之间，使用SASS，我被迫要为所有变量添加命名空间前缀！？！？ AAHAHCHGHVHCH！我曾认为我升级到预处理是有理由的... - ChaseMoskal

@ChaseMoskal 百分之百同意。在我的看法中，必须为这些“本地”变量添加命名空间前缀是一种严重的代码异味。 - crush

@crush：就像过了六个月，我仍然感到不满。$my-widget-color-this，$my-widget-color-that... 令人失望。 - ChaseMoskal