循环的scss不能正确级联

Question

我创建了这样一个for循环：

.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和更高级别时，而不是使用纵横比-md-6，而是实际上使用了纵横比-10。就像这样：

​

​

有人知道我做错了什么吗？

Answer 1

不知道为什么会被否决，但我想出来了。这是因为我的循环是如何工作的，它得到了8后6，所以这是优先考虑。我把我的循环改为：

$breakpoints: sm, md, lg, xl, xxl;

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

而且这起作用了。为什么？因为它首先查看断点，这意味着最后一个断点总是优先于第一个断点，然后循环从1到100并创建类，再一次，后面的数字优先于前面的数字(不需要，但是很好知道)。