如何利用两个Sass Maps生成组合类选择器？

没问题！我来帮你搞定这个自动生成类选择器的需求～核心思路就是用嵌套的@each指令遍历两个Map的所有组合，下面是具体的实现步骤和代码示例：

1. 先定义你的图案与颜色Map #

首先把图案和颜色数据整理成Sass Map，键名用来生成类名，值就是对应的CSS属性值：

// 图案Map：键是图案标识，值是背景图案的URL/渐变等
$patterns: (
  pattern1: url('/path/to/pattern1.png'),
  pattern2: linear-gradient(45deg, #eee 25%, transparent 25%),
  pattern3: repeating-radial-gradient(circle at center, #ccc 0 10%, #fff 10% 20%)
);

// 颜色Map：键是颜色标识，值是背景色
$colors: (
  color1: #ff4444,
  color2: #0099cc,
  color3: #99cc00
);

2. 嵌套@each生成所有组合类 #

通过外层遍历图案、内层遍历颜色，就能覆盖所有组合，同时拼接出你要的类名格式：

// 遍历每个图案
@each $pattern-name, $pattern-value in $patterns {
  // 遍历每个颜色，和当前图案组合
  @each $color-name, $color-value in $colors {
    // 生成类名：.bgp-图案名-颜色名
    .bgp-#{$pattern-name}-#{$color-name} {
      background-color: $color-value;
      background-image: $pattern-value;
      // 可选：合并成background shorthand，控制层叠顺序
      background: $color-value $pattern-value;
      // 可以追加通用背景属性，比如重复方式
      background-repeat: repeat;
    }
  }
}

3. 编译后的CSS效果 #

上面的Sass代码编译后，会生成你期望的所有组合类，比如：

.bgp-pattern1-color1 {
  background-color: #ff4444;
  background-image: url("/path/to/pattern1.png");
  background: #ff4444 url("/path/to/pattern1.png");
  background-repeat: repeat;
}

.bgp-pattern1-color2 {
  background-color: #0099cc;
  background-image: url("/path/to/pattern1.png");
  background: #0099cc url("/path/to/pattern1.png");
  background-repeat: repeat;
}

// ... 所有图案与颜色的组合都会生成对应的类

之前尝试失败的常见原因 #

如果你之前用@each没成功，大概率是这两个问题：

• 没有嵌套@each：只做了单层遍历，没把两个Map的元素组合起来
• 类名拼接时没正确用插值语法#{$variable}：Sass中要把变量插入字符串，必须用#{}包裹变量名

这样写就能完美实现你要的所有颜色+图案组合类啦～

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