有没有办法替换 SCSS 中的全局变量条件？

Question

我最近发现了 "prefers-color-scheme" 媒体查询，发现大多数常用浏览器的更新版本都与它兼容。

我想制作一些生成全局变量的 SCSS 代码，以根据 "prefers-color-scheme" 的值导出，以避免重复 "theme classes"。

$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) 中设置的值）。

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

Answer 1

据我所知，这不能通过 SCSS 是预处理器这一简单事实来完成，因此，您在 SCSS 中生成的代码将被转换为CSS 和您使用的所有变量都将转换为值。

如果你想要变量并按规则改变它们，你应该使用CSS变量，像这样：

:root {
  --main-bg-color: coral; 
}

 @media (prefers-color-scheme: dark){
 :root {
  --main-bg-color: red; 
}
}

.element{
  background-color: var(--main-bg-color);
}

有没有办法替换 SCSS 中的全局变量条件？

Is there a way to replace global variables conditionaly in SCSS?

css

sass

media-queries