尝试优化 sass 断点 mixin答案

【问题标题】：Trying to optimize sass breakpoint mixin尝试优化 sass 断点 mixin
【发布时间】：2019-08-19 20:38:45
【问题描述】：

我创建了一个简单的 mixin 来处理我正在处理的一些媒体查询，但我很想用地图中的内容输出最小值和最大值。我遇到了最大宽度的问题，因为它应该是第一个之后的值，依此类推。我目前在没有 @each 循环并使用 get map value 函数的情况下工作。我可能过于复杂了。

例如
@media (min-width:map 中的第一个 val) 和 (max-width:map 中的下一个 val)

$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) {}

任何建议将不胜感激。

【问题讨论】：

标签： sass scss-mixins

【解决方案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%;
}

【讨论】：