S CSS - L oop список, начинающийся с ключа 2

Question

Если у меня есть список следующим образом:

$breakpoints: (
  all: all,
  xl: 1200,
  lg: 1037,
  md: 797,
  sm: 615,
  xs: 415,
);

В @each есть какой-либо способ l oop через список, но либо сначала удалите первый ключ, либо начните с ключа 2

Answer 1

Я могу придумать два способа добиться этого.

1. С @each l oop

В этом l oop я проверю, равно ли значение «all», если да, я ничего не буду делать и продолжу свой l oop.
Это работает хорошо, но если вы решите изменить «все» на какое-то другое имя, вам нужно обновить l oop.

@each $key, $value in $breakpoints {
  @if ($value == "all") {} // If the value == all, do nothing
  @else {
    @media screen and (max-width: $value) {
      /* Your fancy code */
    }
  }
}

2. С @for l oop

В этом l oop я пройду go через длину $ контрольных точек, начиная с 2.
Затем я получу значение в соответствии с индекс.

@for $i from 2 through (length($breakpoints)) {
    $breakpoint : nth($breakpoints, $i);
    $value : nth($breakpoint, 2);
    @media screen and (max-width: $value) {
      /* Your fancy code */
    }
}

РЕДАКТИРОВАТЬ

Это может быть еще проще с @each l oop:

@each $key, $value in $breakpoints {
  $i: index($breakpoints, $key $value);
  @if ($i != 1)
  {
    @media screen and (max-width: $value) {
      /* Your fancy code */
    }
  }
}

Answer 2

Вы можете пропустить первую запись, используя map-remove (обратите внимание, я добавил * 1px), чтобы получить значения единиц измерения:)

Это не приведет к изменению карты $ breakpoints

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

Answer 3

Не уверен, что вы можете сделать это. Я бы посоветовал сохранить два списка, один из которых содержит значения, которые вы хотите перебрать, а другой объединяет значение «все» и первый список.

https://sass-lang.com/documentation/modules/list