如何在SCSS中将map的数组键合并生成组合CSS规则

解决方法 #

你只需要先把同组的所有选择器预先收集为一个逗号分隔的列表，再统一设置样式即可，无需在第二层循环里直接生成样式规则，实现代码如下：

$rank: (
   [8, 7]: red,
   [6, 5]: blue,
   [4, 3]: green,
   [2, 1]: black,
);

.rank {
  @each $level_group, $color in $rank {
    // 初始化空选择器列表
    $selectors: ();
    @each $level_val in $level_group {
      // 拼接单个等级选择器，加入列表
      $selector: & &--#{$level_val};
      $selectors: append($selectors, $selector, $separator: comma);
    }
    // 整组选择器统一设置样式，自动合并为逗号分隔的格式
    #{$selectors} {
      color: $color;
    }
  }
}

编译输出效果

.rank .rank--8, .rank .rank--7 {
  color: red;
}
.rank .rank--6, .rank .rank--5 {
  color: blue;
}
.rank .rank--4, .rank .rank--3 {
  color: green;
}
.rank .rank--2, .rank .rank--1 {
  color: black;
}

原代码问题说明

你之前的写法是每遍历到一个等级值就生成一条独立的样式规则，Sass默认不会自动合并相同样式的规则，因此会出现单选择器拆分的情况。通过先收集同组选择器再统一生成规则的方式，就能直接得到合并选择器的效果。

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