动态Sass变量

Question

有什么方法可以根据html元素上的类设置颜色变量？还是通过其他方式实现这一目标？

html {

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

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

}

Answer 1

这是基本主题。您可能想使用mixin或包含一个CSS文件中的多个主题。这是您使用include进行操作的方式：

_ 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种颜色作为其参数来代替include：

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

Answer 2

不幸的是，Sass / Scss文件需要编译为Css文件，以便在您的Web浏览器中受支持。

因为Css文件不支持变量，所以只能在Scss模板中设置变量值，因为Sass编译器将替换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元素的值（具有“ Target” ID的变量），然后if语句将找出我们类的名称（日出或月光），最后，我们将exampleTagg的背景更改为我们想要的颜色）

要出于个人目的使用此示例，请用一些实际的tagg替换exampleTagg并将exampleProperty更改为有效的Css属性。

注意，因为JavaScript将访问您编译的Css文件，所以您不需要Scss（您仍然可以使用它）（您仍然可以使用它）。>