bootstrap 5 中等效的 zf-each-breakpoint 是什么？

Question

我在基础中使用 zf-each-breakpoint，现在想在 bootstrap

中使用它

 @include -zf-each-breakpoint {
    // x2 Block grid
    @for $i from 2 through $block-grid-max {
      .#{$-zf-size}-up-#{$i} {
        @include flex-grid-layout($i / 2, '.column.x2');
      }
    }
  }

bootstrap5 中的 zf-each-breakpoint 是什么？

Answer 1

没有直接的等价物，因为 Bootstrap 的构建方式不同。

断点全部存储在$grid-breakpoints映射中：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
)

可以像任何 SASS 映射一样迭代..

@each $breakpoint in map-keys($breakpoints) {
   ...
}