vuejs 项目中使用@mixin 与 @include 来做主题的切换

一： 主题切换一般分为 俩种

1：是我们通过点击页面的主题设置来切换主题

2：是对外暴露主题的样式表，让其他人可以制定主题并进行切换

先说第一种的实现

以vue3.0 为列

vue 项目中跟目录 下创建vue.config.js 文件， import 导入公共样式

代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/styles/theme/variable/themeVariable.scss","@/styles/theme/mixin/themeMixinBase.scss","@/styles/theme/mixin/themeMixinFlex.scss";',

      },
    },
  },

};

　开始分析如何实现主题切换

1：themeMixinBase.scss

@import "../variable/themeVariable";
/*除默认主题外，还有几套主题*/
$themeNum:1;
/*获取themeVariable中定义的变量的值，参数为变量的名字*/
@function var($key){
  @return map_get($themeVariable,$key);
}
/*生成单个样式的多套主题设置*/
@mixin oneCssGenerate($prop,$varKey){
  #{$prop}:var(#{$varKey}_theme_default) ;
  @for $i from 1 through $themeNum{
    [theme="#{$i}"] & {
      #{$prop}: var(#{$varKey}_theme_#{$i}) ;
    }
  }
}
@mixin border($varKey) {
  border:1px solid var(#{$varKey}_theme_default);
  @for $i from 1 through $themeNum{
    [theme="#{$i}"] & {
      border:1px solid  var(#{$varKey}_theme_#{$i});
    }
  }

}

2：themeVariable 中用来存放 每个页面的 样式的css

@import "themeVariableExam";
@import "themeVariableCommon";


@function allVariable(){
  $list:$themeVariableCommon,$themeVariableExam;
  $result:();
  @each  $var in $list{
    $result:map_merge($result,$var);
  }
  @return $result;
}
$themeVariable:allVariable()