使用vue + less 实现简单换肤功能的示例

 @theme:@themea;
 @themea:pink;
 @themeb:blue;
 @themec:gray;

<el-dropdown class="colorBtn " trigger="click" @command="changeColor">
 <span class="el-dropdown-link " >换肤</span>
 <el-dropdown-menu slot="dropdown">
 <el-dropdown-item command="a" @click="change_type(a)">梦幻粉</el-dropdown-item>
 <el-dropdown-item command="b" @click="change_type(b)">天空蓝</el-dropdown-item>
 <el-dropdown-item command="c" @click="change_type(c)">雾霾灰</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

  changeColor(command){
  console.log(command);//能获取到当前点击的元素的command
 }

.theme(@backcolor:#EEA2AD,@fcolor:#fff) {
 .header {
 color: @fcolor;
 background: @backcolor;
 width: 100%;
 height: 2rem;
 position: relative;

 h4 {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
 }
 .go-back {
  width: 2rem;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  float: left;
  line-height: 2rem;
  margin-left: 1rem;
  position: absolute;
  left: 0;
  top: 0;
 }
 .header-cont {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
  color: #fff;
 }
 .colorBtn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  line-height: 2rem;
  margin-right: 1rem;
  position: absolute;
  top: 0;
  right: 0;
 }
 }
}

 @import url('./theme.less');
  .themea{
   .theme();//默认的样式
  }
  .themeb{
   .theme(blue,#fff);
  }
  .themec{
   .theme(#111,#999);
  }

 changeColor(command){
  console.log(command);
  document.getElementById('app').className ='theme'+command ;
 }