7

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

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

然后，逻辑将声明“green”和“red”作为值$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;
}

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

4

2 回答 2

12

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

从变更日志：

默认情况下，不在文档顶层的所有变量分配现在都是本地的。如果有一个同名的全局变量，除非使用 !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;
}
于 2015-02-10T21:04:39.450 回答
9

这是因为一旦将变量分配为全局变量，对该变量的所有进一步分配也都是全局完成的。如果你想在那之后使它成为本地的，你可以做$local-text-color: $text-color;然后color: $local-text-color;

于 2012-10-30T15:30:36.543 回答