动态Sass变量

• Z时代
• 2024-01-10
• 分类：问答

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

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }
  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;
  }
}

回答：

这是基本主题。您可能想使用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 ..
}

以上是 动态Sass变量 的全部内容， 来源链接： utcz.com/qa/433518.html