VUE+SCSS切换主题

如图

img

我始终不明白的是

@each $theme-name, $theme-map in $themes 这句代码,$theme-name, $theme-map 分别表示什么?

$theme-name如果表示的是light和dark,还是background_color和 text-color?如果是前者,那$theme-map就表示这个主题中所有的样式 ,那这条语句 $theme-map: $theme-map !global就有语法错误了 ,如果是后者, 是不是选择了主题,如dark,$themes值就不是之前定义的值了 , 值就是(
background_color: #181c27,//背景
text-color: rgba(255, 255, 255, 0.65), // 主文本色
),那前面的循环我就明白了,它又是如何实现的呢?

https://img-mid.csdnimg.cn/release/static/image/mid/ask/048464928356172.png?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit

forEach 循环 $theme-map代表的key值 ===> light 或者 dark $theme-map 代表的是 {}里面的, 这条语句 $theme-map: $theme-map !global类似三元运算符 先判断这个值是否合法 后加!import 的作用 纯属给人经验 希望能给你启发

$theme-map如果表示{}里面的值 ,那表达式就是
$theme-map: (
background_color: #0bd666,//背景色
text-color: rgba(36, 7, 183, 0.941), // 主文本色
)!global,这样写有问题把?还有@mixin themeify 循环后最终得到的样式结果长的是什么样呢 能贴出来我看下吗,想了一天了 都没搞懂

$theme-name如果表示的是light和dark
$theme-map是表示这个主题中所有的样式
$theme-map: $theme-map !global 报错的话可以在文件最上方加一个$theme-map: null;

https://www.sass.hk/docs/@each 和 Multiple Assignment
https://blog.csdn.net/Jwybwy/article/details/123879377

大体思路如下:

1.使用vuex全局执行命令切换主题 (state - mutations 无须异步)

2.遍历主题色并设置混合,在需要的地方插入混合,使用方法查找对应颜色,生成嵌套,写全局类

3.利用VueX和v-bind:class语法将应用到全局

4.需要的时候直接在对应元素加上全局类即可
https://blog.csdn.net/qq_34707272/article/details/121921724