小编Kev*_*ost的帖子

我最近发现了“prefers-color-scheme”媒体查询，并发现大多数常见浏览器的新版本与其兼容。

我想编写一些 SCSS 代码，生成全局变量以根据“首选颜色方案”导出值，以避免重复“主题类”。

$schemeColor: #eeeeee !default;
$reverseColor: #333333 !default;
$textColor: #000000 !default;


@media (prefers-color-scheme: dark){
  $schemeColor: #333333 !global;
  $reverseColor: #eeeeee !global;
  $textColor: #FFFFFF !global;
}
@media (prefers-color-scheme: light) {
    $schemeColor: #eeeeee !global;
    $reverseColor: #333333 !global;
    $textColor: #000000 !global;
}

当我在这段代码之后使用其中一个变量时，无论首选颜色方案是什么，存储在变量中的值将是最后写入的值

（此处：在 中设置的值@media (prefers-color-scheme: light)）。

我尝试在媒体查询中创建类。
当我这样做时，媒体查询中声明的类会根据颜色方案正确应用，但变量会继续存储它们设置的最后一个值。