css - SCSS - 从键 2 开始循环列表

Question

如果我有如下列表：

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

是否有@each任何方法可以遍历列表，但首先删除第一个键，或者从键 2 开始？

标签： csssass

Answer 1

我可以想到两种方法来实现这一目标。

1. 使用@each 循环

在这个循环中，我将检查值是否等于“all”，如果是，我什么也不做，继续我的循环。
它运行良好，但如果您决定将“all”更改为其他名称，则需要更新循环。

@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 循环

在这个循环中，我将从 2 开始遍历 $breakpoints 的长度。
然后，我将根据索引检索值。

@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 循环可以更容易：

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