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()