scope - 如何分配给 Sass 中的全局变量？

Question

我运行这个 Sass 代码:

$a: 1;
@if 2 + 2 == 4 {
    $a: 2;
}
@debug $a;

我希望看到 2。然而，输出是:

Line 5 DEBUG: 1

我知道 Sass 在 $a 范围内创建了一个新的 @if 变量。如何更改此行为并为全局 $a 赋值？

我使用 Sass 3.4.0。

Answer 1

当您使用 Sass 3.4+ 时，您应该将 !global 标志附加到您的变量声明中:

$a: 1;
@if 2 + 2 == 4 {
    $a: 2 !global;
}
@debug $a; // will output 2

变量声明中的原始 SASS_REFERENCE 说明:

"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.

但是 SASS_CHANGELOG of 3.4+ 表明这种行为已经改变:

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).