首页 文章

SASS中的变量范围

提问于
浏览 次
7

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

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

然后，逻辑将声明"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;
}

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

css sass

2 回答

  • 9

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

    回复于
  • 12

    这是一个老问题，但是对于记录，从版本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;
}
    回复于

相关问题