css - 动态 Sass 变量

Question

有什么方法可以根据 html 元素上的类来设置颜色变量吗？或者任何其他方式来实现同样的目标？

html {

  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;
  }

}

Answer 1

这是基本的主题。您可能想要使用 mixin 或 include 在单个 CSS 文件中执行多个主题。这就是你将如何使用包括：

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

主文件

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

您可以轻松地制作一个使用 3 种颜色作为参数的 mixin，以代替 include：

@mixin theme($accent, $base, $flat) {
    // .. do stuff ..
}

Answer 2

不幸的是，Sass/Scss文件需要编译成Css文件，才能在您的网络浏览器中得到支持。

由于Css文件不支持变量，因此只能在Scss模板中设置变量值，因为Sass编译器会替换 var。（在每个位置，都使用了 var。），具有给定的值。

这意味着，根据Html文件中包含的类，更改变量的颜色无济于事，因为Css文件不包含任何变量。

你可以做这样的事情的唯一方法是：

1. 阅读Html文件以找出已使用的类，
2. 而不是将Scss模板变量更改为正确的颜色值
3. 并将Scss模板编译成Css文件

Answer 3

如果你喜欢使用 JavaScript，你可以这样做：

您将需要一个带有 Id 和 Class 的 HTML 元素（决定使用什么颜色的元素）。

<exampleTagg id="Target" class="Sunrise">...</exampleTagg>

接下来，您需要添加一些 JavaSript

var CurrentColor = document.getElementById("Target").className; 

if (CurrentColor == "sunrise") {
  document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
  document.exampleTagg.style.exampleProperty = "#18c";
}

（第一行将声明一个变量，其中包含我们的 exampleTagg 元素的值（具有“目标”id 的那个），然后 if 语句将找出我们的类的名称（日出或月光），最后，我们将将 exampleTagg 的背景更改为我们喜欢的颜色）

要将此示例用于您自己的目的，请将 exampleTagg 替换为一些真实的标记并将 exampleProperty 更改为有效的 Css 属性。

请注意，您不需要 Scss 来完成这项工作（您仍然可以使用它），因为 JavaScript 将访问您编译的 Css 文件。