基于scss的主题变换

最近老大让我调整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);
    }

最后就是使用了

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

在这里插入图片描述