SCSS用@for循环生成AEM Grid样式时如何合并选择器避免独立输出

问题根因 #

之前在规则块内嵌套@for循环、搭配&拼接选择器的写法，每轮循环都会创建独立的选择器作用域，直接输出单条规则对应的CSS块，根本不会把选择器合并到同一块里，这是导致输出分散、达不到预期的核心原因。

正确实现逻辑 #

• 先通过@for遍历1到12的列偏移序号，将每个符合AEM Grid类名规范的偏移选择器收集到独立的SCSS列表变量中，循环阶段不输出任何样式
• 所有选择器收集完成后，通过SCSS的列表插值语法将整个列表转为逗号分隔的选择器组，再统一挂载公共的margin-left: $pc-100样式声明

可直接复用的SCSS代码 #

// 初始化空列表存储所有偏移选择器
$offset-column-selectors: ();

// 1-12循环收集所有偏移规则对应的选择器
@for $offset-num from 1 through 12 {
  // 按AEM Grid的类名规范拼接对应选择器
  $selector-item: unquote('.aem-GridColumn--offset--#{$offset-num}');
  // 将单条选择器追加到集合列表
  $offset-column-selectors: append($offset-column-selectors, $selector-item);
}

// 输出合并后的统一规则块
#{$offset-column-selectors} {
  margin-left: $pc-100;
}

编译输出效果 #

上述代码编译后会生成完全符合预期的合并选择器规则块，无分散的独立样式块：

.aem-GridColumn--offset--1,
.aem-GridColumn--offset--2,
.aem-GridColumn--offset--3,
.aem-GridColumn--offset--4,
.aem-GridColumn--offset--5,
.aem-GridColumn--offset--6,
.aem-GridColumn--offset--7,
.aem-GridColumn--offset--8,
.aem-GridColumn--offset--9,
.aem-GridColumn--offset--10,
.aem-GridColumn--offset--11,
.aem-GridColumn--offset--12 {
  margin-left: $pc-100;
}

常见错误写法提醒 #

直接在规则块内嵌套循环生成选择器的写法一定会输出分散的独立CSS块，这类写法需要规避：

错误示例（输出为12个独立的单选择器规则块，不符合合并要求）：

.aem-GridColumn {
  @for $i from 1 through 12 {
    &--offset--#{$i} {
      margin-left: $pc-100;
    }
  }
}

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