使用vue+scss实现项目中主题换肤功能

最近项目中需要做主题换肤功能，决定用vue+scss通过切换变量来达到换肤的效果，做了个小demo具体如下。

首先新建一个theme.scss文件

@charset "utf-8";
@mixin theme($backColor:#f00,$fZColor:#000){
  .commonBackColor{
    background: $backColor;
    color:$fZColor;
  }
}
.themea{
  @include theme();
}
.themeb{
  @include theme(#0f0,#fff);
}

html代码

<div id="main">
    <div class="box commonBackColor">啦啦啦</div>
    <button @click="switchoverColor">切换</button>
  </div>

script代码

<script>
    export default {
      name: "main",
      data(){
        return{
          backgroundColor:1,
        }
      },
      mounted(){
        this.switchoverColor();
      },
      methods:{
        switchoverColor(){
          if(this.backgroundColor === 1){
            this.backgroundColor = 2;
          }else{
            this.backgroundColor = 1;
          }
          if(this.backgroundColor === 1){
            document.getElementById('main').className ='themea';
          }else {
            document.getElementById('main').className ='themeb';
          }
        },
      }
    }
</script>

css代码

<style scoped lang="scss">
  #main{
    .box{
      width: 200px;
      height: 200px;
      border: solid 1px #000;
    }
    button{
      border: solid 1px #000;
    }
  }
</style>

这样点切换按钮就可以实现css代码切换了！