如何在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声明:

"变量只能在定义它们的嵌套选择器级别内使用.如果它们在任何嵌套选择器之外定义,它们随处可用.

但3.4+的SASS_CHANGELOG显示此行为已更改:

默认情况下,不在文档顶层的所有变量赋值都是本地的.如果存在具有相同名称的全局变量,则除非使用该!global标志,否则不会覆盖该变量.

例如,$var: value !global将分配给$var全局.可以使用以下方法检测此行为feature-exists(global-variable-shadowing).

Answer 2

通过反复试验,我找到了一个解决方案:我必须添加!global任务.

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