如何让SASS将同值CSS声明合并为单个规则？

开发者阿泽

2026-8-15

合并相同样式的CSS声明为单个规则的SCSS实现方法

需求说明

需要将多个具有相同样式的CSS规则合并为单个选择器组输出，期望的最终CSS如下：

.flex-col-1 div.pagebuilder-column-group,
.flex-col-2 div.pagebuilder-column-group,
.flex-col-3 div.pagebuilder-column-group,
.flex-col-4 div.pagebuilder-column-group,
.flex-col-5 div.pagebuilder-column-group,
.flex-col-6 div.pagebuilder-column-group,
.flex-col-7 div.pagebuilder-column-group,
.flex-col-8 div.pagebuilder-column-group {
  gap: 1rem;
}

当前使用@each循环的SCSS代码会输出多个独立的CSS规则，无法自动合并；手动列举选择器虽可行但不够高效，希望找到更灵活的实现方式。

解决方案：动态构建选择器组

核心思路是先通过循环生成完整的逗号分隔选择器列表，再统一为这个选择器组应用样式，无需手动列举所有选择器。

方法1：结合`@each`与`append()`函数

$row-amounts: 1 through 8;

@mixin initial-gap() {
  // 初始化空的选择器列表
  $selectors: ();
  // 循环生成每个选择器并添加到列表
  @each $rows in $row-amounts {
    $selectors: append($selectors, .flex-col-#{$rows} div.pagebuilder-column-group, comma);
  }
  
  // 为选择器组应用样式
  #{$selectors} {
    gap: 1rem;
  }
}

@include initial-gap();

方法2：使用`@for`循环（适合连续数值场景）

如果目标数值是连续范围，也可以直接用@for循环实现：

@mixin initial-gap() {
  $selectors: ();
  @for $i from 1 through 8 {
    $selectors: append($selectors, .flex-col-#{$i} div.pagebuilder-column-group, comma);
  }
  
  #{$selectors} {
    gap: 1rem;
  }
}

@include initial-gap();