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

Question

I have a map of breakpoints as follows:

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

And I need to loop over these, however I want to start the loop at the sm breakpoint. Here is my current loop:

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

            .. stuff here

        }
    }
}

I haven't been able to find one so far, but is there a way to adjust my opening line above to be something like this:

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

Cheers

It's a part of the setup for a client's framework. I, personally, wouldn't include it. But I don't wanna mess about with it too much. — Jay, Oct 28 '18 at 12:25

score 1 · Answer 1 · answered Oct 25 '18 at 22:10

You could check index number in your loop and if it is > 1 do something:

$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...

  }
}

score 1 · Accepted Answer · answered Oct 26 '18 at 09:34

You could use the map-remove function, which take an ArgList as second parameter.

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
}

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

2 Answers2