css - 无法将 SCSS 变量设置为 CSS 变量？

Question

考虑以下 SCSS:

$color-black: #000000;

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

当使用 node-sass 4.7.2 编译时，它会生成以下 CSS:

body {
    --color: #000000; 
}

当我使用 4.8.3 或更高版本 编译相同的 SCSS 时，它会生成以下内容:

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

我错过了什么？我检查了发布日志，但找不到任何有用的信息。另外，我想知道此更改是否真实，为什么它只有较小的版本更改？它不应该是一个主要版本吗？

此外，我的替代方案是什么？我应该使用插值吗？

Answer 1

只需使用字符串插值:

$color-black: #000000;

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

显然旧的行为不是故意的并且违反了 SASS 的语言规范:

• CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
• CSS variables aren't properly compiled
• Assigning SASS variables to CSS Variables (Custom Properties) no longer works