如何从根变量CSS更改SCSS变量

Question

我要把这个scss变量从一个根变量改成这样

:root {
--primary-custom : yellow;
--primary-hover-custom : blue;
}
$primary:                                           var(--primary-custom);
$primary-hover:                                     var(--primary-hover-custom);

但是它返回这个错误:

Argument `$color` of `darken($color, $amount)` must be a color

最好的方法是什么，我想用这个--primary-custom，这样我就可以用javascript动态地改变它，像这样:

const root = document.documentElement;
root.style.setProperty("--primary-custom", lightColor);

Answer 1

你不能。信息不会朝那个方向流动。

SASS被编译成CSS(通常在构建时)，然后生成的CSS被发送到浏览器。

你不能将CSS变量返回给SASS，因为它太迟了，而且可能在错误的计算机上。

,

我可能会通过使用类而不是CSS变量来解决这个问题，并在SASS中预定义配色方案。

@each可以帮助循环配色方案。