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

主.scss

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