Попытка оптимизировать sass breakpoint mixin

Question

Я создал простой миксин для работы с некоторыми медиа-запросами, над которыми я работаю, но хотел бы вывести значения min и max вместе с тем, что на карте. У меня проблемы с максимальной шириной, так как это должно быть значение после первого и так далее. В настоящее время я работаю без цикла @each и использую функцию get map value. Я мог бы слишком усложнить это.

Например
@media (min-width: первое значение на карте ) и (max-width: следующее значение на карте )

$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px
);

@mixin breakpoint($point) {
  @each $breakpoint in $breakpoints {
  @media (min-width:nth($breakpoint, 2)) and (max-width:next-size)) { @content; }
 }
}

Вывод css должен быть:

@media (min-width: 0) and (max-width: 640px) {}
@media (min-width: 640px) and (max-width: 1024px) {}

любые предложения будут с благодарностью.

Answer 1

Сначала необходимо получить ключ следующей точки останова внутри каждого цикла, а затем получить значение с помощью map-get

$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px
);

@mixin breakpoint() {
  @each $breakpoint in $breakpoints {

    $i: index($breakpoints, $breakpoint);

    @if $i < 3 {      
       $nextKey: nth(map-keys($breakpoints), $i+1);
       @media (min-width:nth($breakpoint, 2)) and (max-width:map-get($breakpoints,$nextKey)) { @content; }      
    }    
 }
}
@include breakpoint() {
    width: 50%;
}