SCSS循环层叠异常：响应式宽高比类未按预期生效

问题场景 #

我编写了如下SCSS @for循环代码，为.hero元素生成1到100的多断点宽高比类：

.hero {
  @for $i from 1 through 100 {
    &.aspect-ratio--#{$i} {
      @include aspect-ratio(16, $i);
    }

    &.aspect-ratio-sm--#{$i} {
      @include media-breakpoint-up(sm) {
        @include aspect-ratio(16, $i);
      }
    }

    &.aspect-ratio-md--#{$i} {
      @include media-breakpoint-up(md) {
        @include aspect-ratio(16, $i);
      }
    }

    &.aspect-ratio-lg--#{$i} {
      @include media-breakpoint-up(lg) {
        @include aspect-ratio(16, $i);
      }
    }

    &.aspect-ratio-xl--#{$i} {
      @include media-breakpoint-up(xl) {
        @include aspect-ratio(16, $i);
      }
    }
  }
}

使用元素时：

<div class="hero aspect-ratio-md--6 aspect-ratio-sm--8 aspect-ratio--10"></div>

在md及以上断点，本该生效的aspect-ratio-md--6未起作用，反而aspect-ratio--10生效了。

问题原因 #

核心问题是CSS声明顺序与优先级冲突：

• 当前循环按$i从1到100遍历，每个数值下先输出无断点的.aspect-ratio--#{$i}，再依次输出sm、md等断点的类。
• 这导致大数值的无断点类声明顺序晚于小数值的断点类。比如aspect-ratio--10（i=10时生成）的全局样式，会出现在aspect-ratio-md--6（i=6时生成）的媒体查询样式之后。
• CSS中，选择器优先级相同时（这里都是.hero.xxx双类选择器，优先级一致），后声明的样式会覆盖先声明的。即使媒体查询条件满足，后出现的全局样式也会覆盖更早出现的媒体查询内样式。

解决方法 #

调整循环结构，按断点维度分组遍历，先输出所有无断点类，再依次输出sm、md、lg、xl断点的类，确保断点类的声明顺序晚于无断点类，且大断点类晚于小断点类：

.hero {
  // 先生成所有无断点的宽高比类
  @for $i from 1 through 100 {
    &.aspect-ratio--#{$i} {
      @include aspect-ratio(16, $i);
    }
  }

  // 再按断点从小到大生成对应类
  @for $i from 1 through 100 {
    &.aspect-ratio-sm--#{$i} {
      @include media-breakpoint-up(sm) {
        @include aspect-ratio(16, $i);
      }
    }
  }

  @for $i from 1 through 100 {
    &.aspect-ratio-md--#{$i} {
      @include media-breakpoint-up(md) {
        @include aspect-ratio(16, $i);
      }
    }
  }

  @for $i from 1 through 100 {
    &.aspect-ratio-lg--#{$i} {
      @include media-breakpoint-up(lg) {
        @include aspect-ratio(16, $i);
      }
    }
  }

  @for $i from 1 through 100 {
    &.aspect-ratio-xl--#{$i} {
      @include media-breakpoint-up(xl) {
        @include aspect-ratio(16, $i);
      }
    }
  }
}

这样生成的CSS中，所有断点类的声明都在无断点类之后，当媒体查询条件满足时，断点类的样式会覆盖无断点类；同时大断点类在小断点类之后，也能保证断点优先级正确。

如果想更简洁，也可以用嵌套循环遍历断点：

.hero {
  // 无断点类
  @for $i from 1 through 100 {
    &.aspect-ratio--#{$i} {
      @include aspect-ratio(16, $i);
    }
  }

  // 遍历所有断点
  $breakpoints: sm, md, lg, xl;
  @each $bp in $breakpoints {
    @for $i from 1 through 100 {
      &.aspect-ratio-#{$bp}--#{$i} {
        @include media-breakpoint-up($bp) {
          @include aspect-ratio(16, $i);
        }
      }
    }
  }
}

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