无法将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; 
}

我错过了什么？ 我查看了发布日志，但没有找到有用的信息。此外，如果这个更改是真实的，为什么只有小版本更改？不应该是一个大版本发布吗？

同时，我的替代选择是什么？ 我应该使用插值法吗？

- Harshal Patil

---

可以使用字符串插值，即 --color: #{$color-black};。参考：https://github.com/sass/node-sass/issues/2336 - Terry

Answer 1

只需使用字符串插值：

$color-black: #000000;

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

显然，旧的行为不是有意的，并违反了SASS的语言规范：

• 在4.8+中混合使用CSS变量和SCSS变量不能正确输出CSS
• CSS变量没有被正确编译
• 将SASS变量赋值给CSS变量（自定义属性）不再起作用

- Terry

Answer 2

scss和css

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

请参考Terry的答案以获得更好的使用体验。

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;
}

- Persijn

Answer 3

我遇到了旧版Sass的问题。

试图从一个数组中编译变量列表时，会卡在双破折号处。以下是我的解决方案，希望对某些人有所帮助。

$var-element:'--';

:root {
    @each $color in $color-variables {
     #{$var-element}#{nth($color, 1)}: #{nth($color, 2)};   
    }
}

- controlZed