如何让SCSS避免生成逗号分隔类列表中不必要的类组合？

问题背景 #

简单场景 #

编写如下SCSS代码时：

.foo-1, .foo-2 {
  // styling ABC

  .bar-1, .bar-2 {
    // styling XYZ
  }
}

SCSS会编译出所有类的交叉组合，包括.foo-1 .bar-2、.foo-2 .bar-1这类不需要的配对。需要仅生成对应组合（.foo-1 .bar-1、.foo-2 .bar-2），且不通过extend、mixin增加代码量，实现代码最小化。

复杂场景 #

如下SCSS代码会编译出大量冗余的交叉类组合：

.foo-list-item-details,
.foo-detail-item-details {
    @include grid-gap(10px);
    display : grid;

    .foo-list-item-detail,
    .foo-detail-item-detail {
        @include gap(5px);
        display     : flex;
        align-items : center;
    }

    .foo-list-item-detail {
        .foo-detail-value {
            @include font-size(13px);
        }
    }

    .foo-detail-item-detail {
        .foo-detail-label {
            @include width(30px);
            @include min-width(30px);
            font-weight : $font-weight-bold;

            i,
            svg {
                @include font-size(18px);
            }
        }
    }
}

需求是让编译器按对应关系（list对应list、detail对应detail）生成仅必要的类组合，剔除冗余代码。

解决方案 #

利用SCSS的@each循环遍历配对标识，动态生成对应嵌套结构，从根源避免交叉组合的生成，同时保持代码简洁。

简单场景实现 #

@each $suffix in 1, 2 {
  .foo-#{$suffix} {
    // styling ABC

    .bar-#{$suffix} {
      // styling XYZ
    }
  }
}

编译后仅生成目标配对的选择器，无冗余交叉组合，代码量未额外增加。

复杂场景实现 #

@each $type in list, detail {
  .foo-#{$type}-item-details {
    @include grid-gap(10px);
    display : grid;

    .foo-#{$type}-item-detail {
      @include gap(5px);
      display     : flex;
      align-items : center;

      // 根据类型添加专属样式
      @if $type == list {
        .foo-detail-value {
          @include font-size(13px);
        }
      } @else if $type == detail {
        .foo-detail-label {
          @include width(30px);
          @include min-width(30px);
          font-weight : $font-weight-bold;

          i,
          svg {
            @include font-size(18px);
          }
        }
      }
    }
  }
}

此写法通过循环生成两组独立的嵌套结构，仅保留list和detail各自对应的类组合，彻底消除冗余编译结果，同时代码结构更清晰易维护。

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