为何.d2中的$var编译为4而非3？SCSS变量作用域疑问

你遇到的问题是Sass的变量提升特性，加上默认作用域规则共同导致的：

• Sass编译时，会把同一代码块（比如.d大括号包裹的区域）内的所有变量声明，提前到块的顶部解析，完全无视代码书写顺序。
• 在.d块里，你先声明了$var: 3，但.d1里的$var: 4没加!local标记，这个赋值会被当成对.d作用域内$var的重新覆盖，而非.d1专属的局部变量。
• 等编译到.d2时，.d作用域内的$var已经被改成4，所以输出结果就是4。

不同在线编译器输出不同，是因为它们用了不同版本的Sass（比如旧版Ruby Sass和新版Dart Sass逻辑有差异），或是开启了不同编译模式。

要让.d1的变量不影响父作用域的$var，给.d1内的变量加上!local关键字，明确它是局部作用域变量即可：

$var: 0;

.a {
    $var: 1;
    z-index: $var; // 1
}

.b {
    z-index: $var; // 0
}

.c {
    .c1 {
        $var: 2;
        z-index: $var; // 2
    }

    .c2 {
        z-index: $var; // 0
    }
}

.d {
    $var: 3;

    .d1 {
        $var: 4 !local; // 显式声明为局部变量
        z-index: $var; // 4
    }

    .d2 {
        z-index: $var; // 3，符合预期
    }
}

编译后.d2的z-index就会是3，.d1的变量只会在自身作用域生效，不会污染父作用域的$var。另外，你也可以直接给子作用域变量起不同名字避免冲突，但用!local是更规范的做法。

内容的提问来源于stack exchange，提问作者bitcorisa