尝试优化 sass 断点混合

Question

我创建了一个简单的 mixin 来处理我正在使用的一些媒体查询，但我很乐意输出最小值和最大值以及地图中的内容。我在设置最大宽度时遇到了问题，因为它应该是第一个之后的值，依此类推。我目前让它在没有@each 循环的情况下工作，并使用获取映射值函数。我可能把这个复杂化了。

例如
@media（最小宽度：地图中的第一个值）和（最大宽度：地图中的下一个值）

$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%;
}

尝试优化 sass 断点混合

Trying to optimize sass breakpoint mixin

sass

scss-mixins