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

Question

如果我有一个列表如下:

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

在 @each有什么方法可以循环遍历列表，但要么先删除第一个键，要么从键 2 开始？

Answer 1

您可以使用 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}' }
    }
}