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

【问题标题】：How to change SCSS Variables from Root Variable CSS如何从根变量 CSS 更改 SCSS 变量
【发布时间】：2021-08-06 04:55:35
【问题描述】：

我打算从这样的根变量中更改这个 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);

【问题讨论】：

标签： javascript css reactjs sass

【解决方案1】：

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

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

您不能将 CSS 变量传回 SASS，因为太晚了，而且可能是在错误的计算机上。

——-

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

@each 可以通过循环配色方案来提供帮助。

【讨论】：

【解决方案2】：

我不明白您的示例中 darken() 函数在哪里，但这里是如何在页面上操作颜色的示例：

您可以为您的 css 变量使用默认颜色。

$primary: yellow;
.text-primary {
    color: var(--primary, $primary)
}

所以现在浏览器尝试查找名为 --primary 的 css 变量，如果不存在则使用默认颜色。

然后，如果您想更改默认的 --primary 颜色 — 只需使用该变量创建伪类 :root，然后使用 javascript 将其附加到任何页面。

:root {
    --primary: green;
}

【讨论】：

我知道，但在示例中它在哪里？