Vue项目中使用Sass实现动态换肤

color-warning: #f2a626,

color-danger: #ee2e6b,

background: #fff,

background-content: #f4f7fc,

background-color: #eaedf7,

),

//dark theme

dark:

(

color-primary: #3961f5,

color-primary-second: #5e81f7,

color-text-primary: #ffffff,

color-danger: #ee2e6b,

background: #1d2742,

background-content: #13192f,

background-color: #1d2742,

)

);

这里定义了一个map–$themes，分别存放对应主题的颜色变量集合。

注意，scss文件名建议用下划线开头，如_themes.scss，防止执行时被编译成单独的css文件，详参sass中文教程（3.1 sass文件导入）。

2.定义另外一个sass文件_handle.scss来操作1中的$theme变量（当然两个文件可以合并，分开写是想把配置和操作解耦），上代码：

@import “@/style/_themes.scss”;

//此处用了sass的map遍历、函数、map存取、混合器等相关知识，

//详细API参考https://www.sass.hk/docs/

//遍历主题map

@mixin themeify {

@each $theme-name, $them