scss 动态切换主题解说

代码解说：

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 {