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

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

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

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