最近老大让我调整xframe中图标，因为要换肤，所以我刚好学习一下换肤的原理，
主要是参考这两篇文章
使用Sass实现主题切换
​
www.jianshu.com
Vue中如何使用sass实现换肤(更换主题)功能
​
blog.csdn.net
项目主要的目录如下图，只能放到这里再多就泄露代码了

主要的文件有
themeVariable.scss 主题变量
variable.scss 主要是定义一些变量
themeMixin.scss 主要实现 @mixin
接下来我们就来实现以下主题切换的方式
首先 是 themeVariable.scss

    // 五种主题切换
    $themes: (
      red: (
        font-color: red,
      ),
      green: (
        font-color: green 
      ),
      blue: (
        font-color: blue
      ),
      orange: (font-color: orange),
      yellow: (font-color: yellow),
    );

这里red,green,blue等，可以用变量代替，因此就出现了variable.scss

    $color-red: red;
    $color-green: green;
    $color-blue: blue;
    $color-orange: orange;
    $color-yellow: yellow;

最后就是 themeMixin.scss 使用 @Mixin

    @import "./themeVariable.scss";
    @mixin themify($themes: $themes) {
      @each $theme-name, $map in $themes {
        // & 表示父级元素
        // !global 表示覆盖原来的
        .theme-#{$theme-name} & {
          $theme-map: () !global;
          // 循环合并键值对
          @each $key, $value in $map {
            $theme-map: map-merge($theme-map, ($key: $value)) !global;
          }
          // 表示包含 下面函数 themed()
          @content;
    
          $theme-map: null !global;
        }
      }
    }
    
    @function themed($key) {
      @return map-get($theme-map, $key);
    }

最后就是使用了

    <template>
      <div class="app-root" :class="themeClass">
        <div class="app-container">
          <p>{{ msg }}</p> 
          <select v-model="theme">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
          </select>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'app',
      data() {
        return {
          msg: 'Dynamic Themes',
          theme: 'red'
        }
      },
      computed: {
        themeClass() {
          return `theme-${this.theme}`;
        }
      }
    }
    
    </script>
    <style lang="scss" scoped>
    @import "../assets/css/themfy.scss";
    .app-container {
      @include themify($themes) {
        color: themed('font-color');
      }
    }
    </style>

最后效果如下
注意下面的class会变化

在这里插入图片描述