换肤方案一: scss换肤

1. 效果图

效果图

2. 实现原理

1. 添加全局样式,动态改变主题
2. 通过scss 定义多套主题
3. 使用混合模式动态取值

3. 代码展示

mixin.scss

// 1.主题定义
$theme-default: (
  font-color: red,
  font-size: 14px,
  background: pink,
);

$theme-green: (
  font-color: green,
  font-size:18px,
  background: yellow,
);

$theme-blue: (
  font-color: blue,
  font-size:24px,
  background: #fff,
);

//  2.将定义好到主题添加到map中
$themes:(
  default:$theme-default,
  green:$theme-green,
  blue:$theme-blue,
);

// 4. 调用混合指令themify() ,定义规则,此处到规则会替换@content
@mixin mytheme{
  @include themify() {
    color: themed("font-color");
    font-size: themed("font-size");
    .test-theme {
      background: themed("background");
    }
  }
};

// 3.定义混合指令, 切换主题,并将主题中到所有规则添加到theme-map中
@mixin themify() {
  @each $theme-name, $map in $themes {
    // & 表示父级元素
    // !global 表示覆盖原来的
    .theme-#{$theme-name} & {
      $theme-map: () !global;
      // 循环合并键值对
      @each $key, $value in $map {
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      // 表示包含 下面函数 themed()
      @content;
      $theme-map: null !global;
    }
  }
}

// 通过key获取map中到值
@function themed($key) {
  @return map-get($theme-map, $key);
}

index.vue

// 5. 调用混合指令

结束语

这种方案显得有点花里胡哨,不过可以用来学习下scss
其实直接给body动态添加一个样式
然后定义多套样式
这样就可以根据不同的样式名动态换肤了
如:
css

.theme-1{
  color: red;
}
.theme-2{
  color: green;
}

给body 添加 class="theme-1",则会应用红色
添加class="theme-2",则会应用绿色.