基于 HTML 元素类配置动态 Sass 变量

问题： 我可以根据应用于 HTML 元素的类动态设置 Sass 颜色变量吗?

答案： 是的，您可以通过使用 Sass include 或mixins.

使用 Includes

在单独的文件 (_theme.scss) 中，使用 Sass 变量定义样式：

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

在您的主 Sass 文件 (main.scss) 中，根据 HTML 元素上的类导入包含内容：

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

    @import "theme";
  }

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

    @import "theme";
 }
}

使用 Mixins

或者，您可以创建一个以颜色作为参数的 mixin：

@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}

在您的主 Sass 文件中，使用适当的颜色调用 mixin：

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

    @include theme($accent, $base, $flat);
  }

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

    @include theme($accent, $base, $flat);
 }
}

这种方法允许您根据 HTML 元素的类动态地将不同的主题应用到 HTML 元素。