为何高版本node-sass无法将SCSS变量转译为CSS变量值？

这其实是node-sass在处理CSS自定义属性（也就是CSS变量）时的行为调整，我来给你理清楚前因后果：

1. 编译结果变化的原因 #

在4.7.2版本里，node-sass会把SCSS变量直接解析后替换到CSS自定义属性中，这其实是不符合CSS规范的处理方式。而从4.8.3版本开始，node-sass调整了逻辑——它把CSS自定义属性块当作「原始CSS内容」对待，不再自动替换其中的预处理器变量，而是保留原始的$color-black变量名输出。

这个调整是为了对齐CSS自定义属性的规范：CSS自定义属性允许包含未被预处理器解析的令牌（这里就是SCSS变量），这样用户可以在后续用JavaScript动态修改这些变量，或者让浏览器自行处理。

2. 为什么是小版本更新？ #

按照语义化版本（SemVer）的约定，大版本号升级通常对应破坏性的API变更，而这个调整被node-sass团队认定为「bug修复」——修复了之前不符合规范的处理逻辑，而不是引入了不兼容的API变化。所以他们选择在小版本迭代中发布这个修正，而不是升级大版本号。

3. 如何让新版本解析SCSS变量到CSS自定义属性？ #

如果你需要在4.8.3+版本里继续让SCSS变量被解析后插入到CSS自定义属性中，只需要使用SCSS的插值语法强制解析变量：

$color-black: #000000;
body {
  --color: #{$color-black};
}

这样编译后的结果就会和4.7.2版本一致：body { --color: #000000; }

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