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