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

Posted 2023-03-06

【中文标题】有没有办法在 SCSS 中有条件地替换全局变量？

【英文标题】：Is there a way to replace global variables conditionaly in SCSS?

【发布时间】：2020-01-07 04:26:37

【问题描述】：

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

我想制作一些 SCSS 代码来生成全局变量以根据“prefers-color-scheme”导出值，以避免重复“主题类”。

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

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

【问题讨论】：

你试过$schemeColor: #333333;而不是$schemeColor: #333333 !global;吗？

@Morpheus，是的，但是当我这样做时，当媒体查询关闭时，变量会返回到 global-scope-value，然后它就不能用想要的值导出。

我认为这不可能。 SCSS 变量在您构建 CSS 时被替换。因此，SCSS 中的 color: $textColor 在您生成的 CSS 文件中将是 color: #000000。使用 CSS 变量是可能的，但这些变量还不是所有地方都支持

【参考方案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 会读取并锁定所有变量，而不考虑 CSS 的媒体查询。所以 CSS 变量似乎是一种更好的方式来做我想做的事。谢谢:)

使用 SCSS 做我想做的事情的正确方法是使用包含媒体查询的 @mixin 并且可以导出。由于媒体查询的结果被缓存，因此拥有大量媒体查询不应导致性能问题。 This page 启发我找到这个解决方案

哦，是的，我在我的个人项目中一直在使用类似的东西，没有提及，因为我认为您只想使用真正的 SCSS 变量。无论如何，我鼓励使用 @mixins ，这是一种非常干净的方法。

所以，我正在为同样的事情苦苦挣扎。无法理解 SCSS 中的 mixin，是否可以使用 mixin 命令执行 SCSS 中最初要求的操作？ @KevinSubrebost ？