可以在 Sass 映射循环中使用切片在第二个实例中开始循环吗？

Question

我有一个断点图如下：

$grid-breakpoints: (
    xs: 0,
    sm: 568px,
    md: 768px,
    lg: 992px,
    xl: 1280px,
    xxl: 1500px
) !default;

我需要循环这些，但是我想在 sm 断点处开始循环。这是我当前的循环：

@each $name, $value in $grid-breakpoints {
    @include media-breakpoint-up(#{$name}) {
        @for $i from 1 to 13 {

            .. stuff here

        }
    }
}

到目前为止我还没有找到，但是有没有办法将我上面的开场白调整成这样：

@each $name, $value in $grid-breakpoints[2:] {

干杯

Answer 1

您可以检查循环中的索引号，如果它大于 1，请执行以下操作：

$grid-breakpoints: (
    xs: 0,
    sm: 568px,
    md: 768px,
    lg: 992px,
    xl: 1280px,
    xxl: 1500px
) !default;

@each $name, $value in $grid-breakpoints {
  $i: index($grid-breakpoints, $name $value);

  @if $i>1{

    do something...

  }
}

Answer 2

您可以使用 map-remove function, which take an ArgList 作为第二个参数。

Demo (SassMeister)

$grid-breakpoints: (
    xs: 0,
    sm: 568px,
    md: 768px,
    lg: 992px,
    xl: 1280px,
    xxl: 1500px
) !default;


@each $name, $value in map-remove($grid-breakpoints, 'xs', 'sm') {
  .. stuff here
}

可以在 Sass 映射循环中使用切片在第二个实例中开始循环吗？

Possible to use a slice in a Sass map loop to start looping at the second instance?

each

loops

sass

slice

sass-maps