SCSS 变量不能与 prefers-color-scheme: dark 结合使用

Question

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

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

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

然后当我尝试整个黑暗模式时，首选颜色方案：黑暗被忽略，颜色显示为没有首选颜色方案。我在 Chrome 中测试了整个东西，并使用开发工具来模拟 CSS 功能。

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

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

Answer 1

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

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

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