无法将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的语言规范:

• 与SCSS变量混合的CSS变量在4.8+中不会发出适当的CSS
• CSS变量未正确编译
• 将SASS变量分配给CSS变量(自定义属性)不再有效

Answer 2

scss 和 css

我找到了一种将 scss 变量映射到 css 变量的解决方法。

请参阅特里的答案以更好地使用

Scss：

// sass variable map 
$colors: (
  color-black: #FFBB00
);

// loop over each name, color
:root {
  // each item in color map
  @each $name, $color in $colors {
    --#{$name}: #{$color};
  }
}

css：

:root {
  --color-black: #FFBB00;
}