Question

我创建了一个简单的mixin来处理我正在使用的某些媒体查询，但是希望将最小值和最大值与地图中的内容一起输出。我在最大宽度上遇到了麻烦，因为它应该是第一个之后的值，依此类推。我目前在没有@each循环的情况下使用了get map值函数。我可能把这个复杂化了。

例如
@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断点混合

1 个答案: