动态Sass变量

这是基本主题。您可能想使用mixin或包含一个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种颜色作为其参数来代替include：

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

如果您想使用JavaScript，可以执行以下操作：

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

  ...

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

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

  如果（CurrentColor ==“ sunrise”）

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

  否则，如果（CurrentColor ==“ moonlight”）

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

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

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

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