css - SCSS 变量不能与 prefers-color-scheme: dark 一起使用

Question

我目前正在尝试使用 CSS 功能prefers-color-scheme。
由于我使用的是SCSS，所以我声明了我在开始时使用的所有颜色。所以这就是我所做的：

$textColor: #1B1C1E;
$hoverColor: #0203048a;

@media (prefers-color-scheme: dark) {
  $textColor: #FAFAFA;
  $hoverColor: #BBC6C6;
}

然后，当我尝试整个暗模式时，prefers-color-scheme: dark 被忽略，颜色显示为没有preferred-color-scheme。我在 Chrome 中测试了整个东西，并使用开发工具来模拟 CSS 功能。

有人知道为什么是这样吗？我不能将 SCSS 变量与首选颜色方案结合使用吗？

到目前为止，唯一的解决方案是将所有在暗模式下更改的代码放入@media (prefers-color-scheme: dark) {}部件中。但这有点耗时，如果您必须为每次更改都执行此操作。

Answer 1

正如我之前所说，我在另一个 StackOverflow 帖子中找到了解决方案。
这里简单总结一下内容：

TL;DR：将 SCSS 转换为 CSS 时，SCSS 变量（即$名称前面的变量）也不会转换。

为了使用同样适用于 CSS 的变量，它们必须用--（而不是$）声明。
然后var(--varName)指定使用它们。