如何在SASS中循环嵌套Map生成主题CSS变量

你的$themes是三层嵌套结构：主题 → 样式变体 → CSS变量键值对，当前的混合宏只做了两层循环，缺少遍历样式变体的层级，因此需要添加第三层@each循环来匹配结构。

修改后的混合宏代码如下：

@mixin theme() {
  @each $theme-name, $variants in $themes {
    .#{$theme-name} {
      @each $variant-name, $vars in $variants {
        .#{$variant-name} {
          @each $var-key, $var-value in $vars {
            --#{$var-key}: #{$var-value};
          }
        }
      }
    }
  }
}

循环逻辑说明 #

• 第一层@each：遍历最外层$themes，获取主题名称（如theme-1）和该主题下的所有样式变体集合。
• 第二层@each：遍历当前主题的样式变体，获取变体类名（如primary）和该变体对应的CSS变量键值对。
• 第三层@each：遍历当前变体的变量键值对，逐个生成对应的CSS自定义属性。

调用@include theme();后，即可生成你期望的层级CSS结构，每个主题类下的变体类会包含对应的所有CSS变量。

内容的提问来源于stack exchange，提问作者Meek