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