scss实现简单换肤

定义variable.scss 文件 定义全局变量

// 字体颜色
$info: red !default;
$danger: #000 !default;
$size: 50px !default;
$sizeMini: 25px !default;
$color: #fff;
$yeColor: yellow;

定义index.scss文件

@import "./variable.scss";
$themes: (
    default: ( // 全局样式属性
        color: $color,
        background:$info ,
        font-size:$size
        ),
    old: (color: $yeColor,
        background:$danger,
        font-size:$sizeMini
         ),
);

@mixin themeify {

    @each $theme-name,
    $theme-map in $themes {
        $theme-map: $theme-map !global;

        [data-theme="#{$theme-name}"] & {
            @content;
        }
    }
}

//声明一个根据Key获取颜色的function
@function themed($key) {
    @return map-get($theme-map, $key);
}

// 获取字体
@mixin font_color($color) {
    @include themeify {
        color: themed($color) !important;
    }
}

@mixin background_color($background) {
    @include themeify {
        background: themed($background) !important;
    }
}
@mixin font_size($font-size) {
    @include themeify {
        font-size: themed($font-size) !important;
    }
}

使用

   @include font_color(color);
   @include background_color(background);
   @include font_size(font-size);

APP.vue中初始化设置body属性

    onMounted(() => {
      document
        .getElementsByTagName("body")[0]
        .setAttribute("data-theme", "default");
    });

第二种方法