【问题标题】：Unable to set SCSS variable to CSS variable?无法将 SCSS 变量设置为 CSS 变量？
【发布时间】：2018-05-06 18:09:15
【问题描述】：

考虑以下 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; 
}

我错过了什么？我检查了发布日志，但找不到任何有用的东西。另外，我想知道这个变化是不是真的，为什么它只有微小的版本变化？它不应该是一个主要版本吗？

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

【问题讨论】：

是的，使用字符串插值，即--color: #{$color-black};。见：github.com/sass/node-sass/issues/2336

标签： css sass

【解决方案1】：

只需使用字符串插值：

$color-black: #000000;

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

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

【讨论】：

【解决方案2】：

scss 和 css

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

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

文字：

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

【讨论】：

【解决方案3】：

我在使用旧的 sass 版本时遇到了问题。

试图编译来自数组的变量列表，它会被双破折号卡住。这是我的解决方案，以防它帮助某人


$var-element:'--';

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

【讨论】：