覆盖SASS颜色，例如使用数据属性

问题描述

我正在尝试实现类似How to override css prefers-color-scheme setting的功能，不同之处在于我使用的是SCSS。

定义了一些顶级变量：

$content-primary: #000000;
$content-secondary: #FFFFFF;

我想覆盖这些值，具体取决于客户端上的信息（localStorage，媒体查询）。我首先将数据属性设置为html元素，例如document.documentElement.setAttribute("data-theme","dark");。

// Some SCSS magic here checking data attributes
// When data-theme="dark" is set,the following should be applied:
$content-primary: #F1F1F1;
$content-secondary: #222222;

我尝试使用与相关问题相同的逻辑，但这不起作用。

[data-theme="dark"] {
    $content-primary: #F1F1F1;
    $content-secondary: #222222;
}

这有可能吗？

解决方法

我已经完成了一个项目的主题并使用了!default Click here to read documentation

但是看到您想做什么，我建议您使用本机CSS var(--content-primary)

不仅可以基于属性/类/父对象等来覆盖此基本CSS变量，而且还可以基于Media Query对其进行覆盖，这使它们成为了令人难以置信的多功能工具。