当前位置:   article > 正文

scss 动态切换主题解说_@each $theme-name, $theme-map in $themes {

@each $theme-name, $theme-map in $themes {

代码解说:

1、定义两个主题颜色:分别作字体颜色和背景颜色
$themes: (
    red: (fontColor: red,bgColor:gold),
    yellow: (fontColor: yellow,bgColor:brown),
);

 

2、使用全局混入处理,解析主题变量组:@mixin
@mixin themify($themes) {  //$themes 传入的主题组

     //因为上面主题定义为二级, ====》这里循环一级内容
    @each $theme-name, $map in $themes {  //循环主题组,可理解为jq的foreach

        // & 表示父级元素
        // *|dom|className 等等时表示节点或选择器等
        // !global 表示覆盖原来的


        .theme-#{$theme-name} * {  //这里是生成格式,参考第五点解说
            $theme-map: () !global;
            // 循环合并键值对 ======》这里循环二级内容
            @each $key, $value in $map {
 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/332282
推荐阅读
相关标签
  

闽ICP备14008679号