基于 scss 的主题配色解决方案

$themeArr: (
    "theme1": (
        "color": green,
        "background": red,
    ),
    "theme2": (
        "color": orange,
        "background": blue,
    ),
    "theme3": (
        "color": orange,
        "background": blue,
    ),
);

@mixin setThemes($keyStyle:"color",$themes:$themeArr) {
    @each $theme,$map in $themes {
        .body-theme-#{$theme} & {
            #{$keyStyle}: map-get($map, $keyStyle);
            /**相比前面的方法，这里多了这句话**/
            @content;
        }
    }
}

p{
    font-size: 20px;
    line-height: 20px;
    @include setThemes('color') {
        font-size: 30px;
    };
}

@charset "UTF-8";
p {
  font-size: 20px;
  line-height: 20px;
}

.body-theme-theme1 p {
  color: green;
  /**相比前面的方法，这里多了这句话**/
  font-size: 30px;
}

.body-theme-theme2 p {
  color: orange;
  /**相比前面的方法，这里多了这句话**/
  font-size: 30px;
}

.body-theme-theme3 p {
  color: orange;
  /**相比前面的方法，这里多了这句话**/
  font-size: 30px;
}
/*# sourceMappingURL=test.css.map */