本文介绍了在Vue项目中使用Sass实现动态换肤的方法。首先定义了一个包含不同主题颜色变量的$themes地图，然后在_handle.scss文件中通过Sass的map遍历、函数和混合器操作这些变量。在Vue组件中，通过引入相应的混入器并传入颜色键值，轻松切换主题。此外，文章还分享了作者学习JavaScript和前端框架的经验和建议。
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
最低0.47元/天 解锁文章
扫一扫
2179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
