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

Question

我正在尝试实现与这里类似的东西：，不同之处在于我使用的是 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;
}

这有可能吗？

Answer 1

我在一个项目上做了主题化并使用了!default Click here to read documentation

不过看你要做什么，我建议你用native CSS var(--content-primary)

这个基本 CSS 变量不仅可以基于 attribute/class/parent 等被覆盖，而且还可以基于媒体查询被覆盖，这使它们成为一个令人难以置信的多功能工具。

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

Overwrite SASS colors, e.g with data-attributes

html

sass

styling