scss for 循环未正确级联答案

【问题标题】：scss for loop is not cascading correctlyscss for 循环未正确级联
【发布时间】：2022-11-01 20:17:38
【问题描述】：

我创建了这样的 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及以上，而不是使用 aspect-ratio-md-6 它实际上是在使用 aspect-ratio-10 代替。像这样：

有谁知道我做错了什么？

【问题讨论】：

标签： css sass

【解决方案1】：

不知道为什么它投了反对票，但我想通了。这是因为我的循环是如何工作的，它在 6 点后达到 8 点，因此优先。我将循环更改为：

$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 并创建类，同样，后面的数字优先于前面的数字（不需要，但很高兴知道)

【讨论】：