scss 在Sass样式表中定义多色主题

Posted 2021-05-18

//Create the mixin for theme colors
@mixin theme($name, $color) {
  // Define colors in your theme
  $primary: $color;
  $secondary: lighten(adjust-hue($color, 20), 10%);
  // Add your classes with css colors added
  .#{$name} {
    .element {
      color: $primary;
    }
    .other-element {
      background: $secondary;
    }
  }
}
// Using the theme
@include theme(theme-banana, yellow);
// Output
.theme-banana .element {
  color: yellow;
}
.theme-banana .other-element {
  background: #bbff33;
}