使用Sass实现主题切换

主题切换大概想到以及找到的有以下几种方式：

• DWZ富客户端框架主题切换功能

实现方式：

1. 将不同主题的样式抽取出来。
2. 生成多份不同的主题样式文件。
3. 动态引入。

//  theme1.css
.mod {
  color: red;
}

//  theme2.css
.mod {
  color: green;
}

//  theme3.css
.mod {
  color: blue;
}

DWZ富客户端框架主题切换

弊端：需要同时维护多份主题文件。

• 饿了么换肤功能
  实现方式：
  1. 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
  2. 根据用户选择的主题色生成一系列对应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
  3. 把关键词再换回刚刚生成的相应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
  4. 直接在页面上加 style 标签，把生成的样式填进去：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L198-L211

饿了么这种实现方式严格来说只能算换肤，因为只是改变了皮肤颜色。而且全局替换颜色变量是比较暴力的一种方式。对于大型项目不建议采用。

考虑目前项目的实际情况：
目前这个项目是个页面比较多的SPA，大概七八十个页面。按业务需求需要大概2-4个主题，主题数量比较少。

我需要的主题切换方式是不同主题的样式代码打包在一起，通过应用不同主题的class来实现主题切换。
这个class可以加在body或者根组件上，也可以添加在具体的元素或者小模块上。
对应如下两种样式：

.theme-class .component {
  /* Style for the component when child of `.theme-class` */
}

.component.theme-class {
  /* Style for the component when has `.theme-class` */
}

这里个人比较倾向第一种方式，所以我们期望的包含主题的样式格式应该类似如下：

.theme1 .component {
  ...
}

.theme2 .component {
  ...
}

.theme3 .component {
  ...
}

然而如果是上面这种形式的话，又是需要维护三份样式。所幸的是我们可以使用Sass来做这件事。（Less或者其他的样式预处理工具也可以做到同样的事情，只是变量作用域稍微有些不一样）

以Vue为例: