如何编写Sass混合宏递归将嵌套Map转为CSS自定义属性？

这里提供完整的递归混合宏实现，能自动遍历嵌套Map并生成符合要求的CSS变量：

1. 示例嵌套颜色Map #

先定义一个符合需求的嵌套$colors变量：

$colors: (
  yellow: (
    10: #fff9c4,
    hover: (
      10: #fff59d
    )
  ),
  blue: (
    20: #bbdefb,
    active: (
      20: #90caf9
    )
  )
);

2. 递归混合宏实现 #

编写名为generate-color-vars的混合宏，通过递归遍历Map层级，拼接变量名并生成CSS自定义属性：

@mixin generate-color-vars($map, $prefix: "") {
  @each $key, $value in $map {
    // 拼接当前层级的变量名前缀，空前缀时直接用当前key
    $current-prefix: if($prefix == "", $key, "#{$prefix}-#{$key}");
    
    @if type-of($value) == "map" {
      // 值为Map时继续递归遍历
      @include generate-color-vars($value, $current-prefix);
    } @else {
      // 值为颜色（或其他CSS有效值）时，生成对应的CSS变量
      --#{$current-prefix}: #{$value};
    }
  }
}

3. 混合宏的使用 #

在html选择器中引入该混合宏即可：

html {
  @include generate-color-vars($colors);
}

4. 生成的最终CSS #

编译后会生成如下符合要求的CSS自定义属性：

html {
  --yellow-10: #fff9c4;
  --yellow-hover-10: #fff59d;
  --blue-20: #bbdefb;
  --blue-active-20: #90caf9;
}

注意事项 #

• 确保嵌套Map的叶子节点都是有效的CSS值（颜色、长度等），如果需要处理其他类型的值，可以扩展type-of的判断逻辑
• 变量名用-分隔，完全符合CSS自定义属性的命名规范
• 递归逻辑会自动处理任意深度的嵌套Map，不需要手动修改混合宏适配层级

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