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;
}

main.scss

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

    @import "theme";
  }

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

    @import "theme";
 }
}

您可以轻松制作一个以3种颜色作为参数的mixin来代替包含：

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

Answer 2

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

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

这意味着，根据 Html 文件中包含的类，它无助于更改变量的颜色，因为 Css 文件赢了“ t包含任何变量。

你能做到这一点的唯一方法是：

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

Answer 3

如果您想使用JavaScript，可以这样做：

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

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

var CurrentColor = document.getElementById（“Target”）。className;

if（CurrentColor ==“sunrise”）

{ document.exampleTagg.style.exampleProperty =“＃37CCBD”; }

否则if（CurrentColor ==“moonlight”）

{ document.exampleTagg.style.exampleProperty =“＃18c”; }

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

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

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

动态Sass变量

3 个答案: