Css 有没有办法有条件地替换SCS中的全局变量？

我最近发现了“首选配色方案”媒体查询，并发现大多数常见浏览器的更新版本都与之兼容

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

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

（此处：在

@媒体中设置的值（首选配色方案：灯光）

）

我尝试在媒体查询中创建类。

---

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

据我所知，这无法通过SCS是预处理器这一简单事实来实现，您在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);
}

---

您是否尝试过

$schemeColor:#333333而不是
$schemeColor:#333333！全球？@Morpheus，是的，但是当我这样做时，当媒体查询关闭时，变量返回到全局范围值，然后它就不能用想要的值导出。我认为这是不可能的。当您构建CSS时，SCSS变量将被替换。因此，SCSS中的
color:$textColor
将在生成的CSS文件中
color:#000000
。CSS变量是可能的，但并非所有地方都支持这些变量。事实上，看起来SCSS读取并锁定所有变量，而不考虑作为CSS的媒体查询。所以CSS变量似乎是一个更好的方法来实现我想要的。谢谢：）我想用SCS做的正确方法是使用包含媒体查询的
@mixin
，该查询是可导出的。由于媒体查询的结果是缓存的，因此大量的媒体查询不应导致性能问题。启发我找到了这个解决方案是的，我在我的个人项目中一直在使用类似的东西，没有标注，因为我认为你只想使用真正的SCSS变量。无论如何，我鼓励使用@mixins，这是一种非常干净的方法。
:root {
  --main-bg-color: coral; 
}

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

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