1.首先在sass文件定义变量

$themes:(
    default :(
        color1: #fff,
        color2: red
    ),
    light:(
        color1: #eee, 
        color2: yellow
    )
)

2.定义好2种颜色值之后，我们需要使用@mixin函数就行封装

//function（name, value）{  } 一个意思，参数来的
@mixin setColor($name, $value) {
  //$th1是表示 key值,相当于default跟light,$th2表示color1,color2
  @each $th1 $th2 in $themes {
    //@at-root表示全局样式,$th1就是default跟light,最后编译成#app.them_default,#app.them_ light ;
    @at-root #app.them_#{$th1} & {
      @content;  
       @if $name == bor {
          border-color: map-get($map: $th2, $key: $value);
        } @else-if $name == t {
          color: map-get($map: $th2, $key: $value); 
        } @else-if $name == bg {
          background-color: map-get($map: $th2, $key: $value);
        }
      }
   }
 }

3.全局导入文件里面

.div{
  @include  setColor(bor, color1); 
  // @include  setColor(t, color1); 
  // @include  setColor(bg, color1); 
}
编译成
#app.them_default  .div{
    border-color: #fff;
}
#app.them_light  .div{    
    border-color: #eee;
}

这样就能达到主题切换了