Get top X number of rows in sass map?

Question

I've got this sass map:

$breakpoints: (
    xs 0 $breakpoint-sm,
    sm $breakpoint-sm + 1 $breakpoint-md,
    md $breakpoint-md + 1 $breakpoint-lg,
    lg $breakpoint-lg + 1 $breakpoint-xlg,
    xlg $breakpoint-xlg + 1 $breakpoint-xxlg,
    xxlg $breakpoint-xxlg + 1 $no-limit
) !default;

Now I would like to get the first four "rows" in a @each loop, how would this be achieved?

Answer 1

As you know the value that you want to use, you could do it this way:

@each $key, $value in map-remove($breakpoints, xxlg, xlg) {
    @media (max-width: $value ){
        // dummy content printing out the breakpoint
        body::before { content: '#{$key}' }
    }
}

You don't loop on x number of items, but you remove the items you don't want.
Note that it won't mutate your original map.