sass切换主题时，变量示例

 切换主题时，通过改变最外围dom的data-theme属性的值来加载不同的样式

   data-theme 有两个值分别为：[data-theme = 'wh-theme']和[data-theme = 'default-theme']

<div id="hompage" :data-theme="nowTheme" v-loading="loading">
    <router-view><router-view/>
</div>

 sass变量设置

  mixins.scss

// 默认主题的变量集合
$default-theme : (
  base-color: #181d35,//背景色
  text-color:#fff,//字体颜色
);
// 武汉主题的变量集合
$wh-theme : (
  base-color: #fff,//背景色
  text-color:#000,//字体颜色
);
//定义主题对象
$themes: (// key为主题  value为主题的变量集合
  default-theme: $default-theme,
  wh-theme: $wh-theme
);


// 生成主题背景色样式
@mixin base-background(){
    //            key,  value in $themes
    @each $themename , $theme in $themes {
        [data-theme = '#{$themename}'] & {
                                         // 对象         //key         输出对象中key的值
            background-color: map-get($map: $theme, $key: base-color );
        }
    }
}
// 生成主题字体色样式
@mixin text-color(){
    @each $themename , $theme in $themes {
        [data-theme = '#{$themename}'] & {
            color: map-get($map: $theme, $key: text-color ) !important;
        }
    }
}

主要样式文件

main.scss

@import 'mixins.scss';

.bg{
    @include base-background()
}
.ibox-title{
     @include text-color();
}