Vue中使用sass实现换肤功能

先给大家展示下效果图：

先给大家看一下目录和主要文件：

解释一下主要文件：

base.scss： 一些通用样式文件。

mixin.scss： 定义mixin方法的文件。

varibale.scss： 颜色，字体，背景的配置文件

以下就拿封装的head组件代码来展示以下实现逻辑，现在大家主要是来理解，不要着急，在文章最后会贴出三个主要文件的代码的。

为什么会在 background:$background-color-theme; 地方标注错误？

如果之前用过sass的同学可能会知道，这样虽然实现了css样式变量化，但是后期没有办法作出灵活更改的。

所以需要把设置背景颜色封装成一个mixin方法（包括字体大小，字体颜色，都需要进行封装）

请看mixin.scss中的代码：

主要原理：

通过设置html的attribute属性在封装的函数中进行判断，进行相应的设置不同的颜色

css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，

这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。

更换主题时的具体操作：

下边是主要文件完整的代码

base.scss示例代码：

mixin.scss示例代码：

variable.scss示例代码：

mine.vue中更换主题时的操作代码