Scss支持多主题切换的方案实现

实现换肤功能：

运用到 sass相关知识点： https://www.sass.hk/docs/

  1. 变量 $
  2. @import
  3. Maps&map-get函数
  4. 插值语句 #{} 
  5. @each、
  6. 定义混合指令 @mixin
  7. 引用混合样式 @include     
  8. @function

 themeify.scss

 1 @import './themes.scss';
 2 @mixin themeify {
 3   @each $theme-name, $theme-map in $themes {//$theme-name 主题样式类名， $theme-map样式
 4     $theme-map: $theme-map !global; //!global 把局部变量强升为全局变量
 5     body[data-theme=#{$theme-name}] & { //判断html的data-theme的属性值  #{}是sass的插值表达式   & sass嵌套里的父容器标识
 6       @content;// @content是混合器插槽，像vue的slot
 7     }
 8   }
 9 }
10 
11 //声明一个根据Key获取颜色的function
12 @function themed($key) {
13   @return map-get($theme-map, $key);//从相应主题中拿到相应key对应的值
14 }

themes.scss(定义变量map：themes)  $map: (key1: value1, key2: value2, key3: value3) =>  key:theme-name    value:theme-map

 1 //定义theme-map
 2 $blueTheme:(
 3   themeColor:#005bac,
 4   hamburgerColor:#02549e,
 5   rightMenuColor:#006dcc,
 6   topButtonColor:#0d84eb,
 7   selectBorderColor:#0d84eb,
 8   munuActiveColor:#006dcc,
 9   menuArrowColor:#9c9c9c,
10   subMenuDbjUrl:'~@/assets/image/subMenuDlbj.jpg',
11   subMenuLbjUrl:'~@/assets/image/subMenuLbjB.jpg',
12   messageBoxHeader:#006dcc,
13   messageBoxFooter:#f5faff,
14   messageBoxFborder:#edf2f7,
15   messageBoxButton:#006dcc,
16   closeIconUrl:'~@/assets/image/closeIconBlue.png',
17   primaryBtnHoverColor:#398bd5,
18   plainBtnHoverColor:#dceafe,
19   plainBtnHoverBorderColor:#4296e4
20 );
21 $redTheme:(
22       themeColor:#BE2B2E,
23       hamburgerColor:#AF282B,
24       rightMenuColor:#c62d30,
25       topButtonColor:#df3336,
26       selectBorderColor:#df3336,
27       munuActiveColor:#c62d30,
28       menuArrowColor:#9c9c9c,
29       subMenuDbjUrl:'~@/assets/image/subMenuDlbj.jpg',
30       subMenuLbjUrl:'~@/assets/image/subMenuLbjR.jpg',
31       messageBoxHeader:#c62d30,
32       messageBoxFooter:#f5faff,
33       messageBoxFborder:#edf2f7,
34       messageBoxButton:#006dcc,
35       closeIconUrl:'~@/assets/image/closeIconRed.png',
36       primaryBtnHoverColor:#d55c60,
37       plainBtnHoverColor:#fee9e9,
38       plainBtnHoverBorderColor:#cb1216
39 
40 );
41 $greenTheme:(
42       themeColor:#409BA1,
43       hamburgerColor:#398B90,
44       rightMenuColor:#44A6AC,
45       topButtonColor:#53C2C2,
46       selectBorderColor:#53C2C2,
47       munuActiveColor:#45a7ad,
48       menuArrowColor:#9c9c9c,
49       subMenuDbjUrl:'~@/assets/image/subMenuDlbj.jpg',
50       subMenuLbjUrl:'~@/assets/image/subMenuLbjG.jpg',
51       messageBoxHeader:#45a7ad,
52       messageBoxFooter:#f5faff,
53       messageBoxFborder:#edf2f7,
54       messageBoxButton:#006dcc,
55       closeIconUrl:'~@/assets/image/closeIconGreen.png',
56       primaryBtnHoverColor:#75c1c5,
57       plainBtnHoverColor:#ddfcff,
58       plainBtnHoverBorderColor:#429aa0,
59  
60 );
61 $themes:(
62   blueDeep:$blueTheme,
63   redLight:$redTheme,
64   greenLight:$greenTheme,
65 
66 );

main.scss

@import './variables.scss';
@import '../theme/themeify';
*{
  @include themeify{//@include 引用混合样式 @mixin
    .el-icon-date:before {
      content: "\e60a";
      font-family:"iconfont";
    }
    .el-pagination{
      padding:0;
    }
    .el-pagination .el-select .el-input .el-input__inner{
    height:32px;
    line-height:32px;
    }
    .el-pagination button:hover {
        color:themed('themeColor');//从theme-map中找到key为themeColor的值
    }
....
}

 

posted @ 2020-08-04 17:34  月上弯  阅读(2624)  评论(0)  编辑  收藏  举报