如图
我始终不明白的是
@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), // 主文本色
),那前面的循环我就明白了,它又是如何实现的呢?
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