Arrays 如何在SCSS中获取数组的$value？

我正在制作自己的插件，通过在SCSS中编写单个

@include

行自动进行多媒体查询

因此，当我键入

@include media（$bp值，宽度）时，输出应如下所示：

@media all and (min-width: 564px) {
    width: 200px;
}
@media all and (min-width: 768px) {
    width: 300px;
}
@media all and (min-width: 992px) {
    width: 400px;
}
@media all and (min-width: 1200px) {
    width: 500px;
}

这是代码：

$breakpoints: (
    564,
    768,
    992,
    1200
);

$bp-values: (
    width: (
        200px, 300px, 400px, 500px
    ),
    font-size: (
        20px, 30px, 40px, 50px
    )
);

@function gridnum($m, $v) {
    @return map-get($m, $v);
}

@mixin medias($map, $key) {
    $myList: map-get($map, $key);
    @each $value in $myList {
        $number: index($myList, $value);
        $grid: gridnum($breakpoints, $num);
        @if $value == $num {
            @media all and (min-width: $grid + px) {
                #{$key}: $value;
            }   
        } @else {
            @warn "There is an error to make @media queries.";
        }
    }
}

我需要的是获取
$breakpoints
的
$values
，将其设置为@media querys'宽度的前缀

但是代码没有运行，我得到了以下结果：

错误：未定义变量“$num”

最空闲的解决方案是在单个@each指令中合并2$maps，但SCSS似乎不支持这一点

有什么方法可以解决这个问题吗？
在我看来，您不太了解地图和列表之间的区别

该列表是值的
数组
：

$breakpoints: (
    564,
    768,
    992,
    1200
);

或

或

所以这个
@返回映射得到（$m，$v）
将始终显示错误，因为
$breakpoints
不是映射

这些贴图具有键和值：

 $breakpoints: (
        xs: 564,
        md: 768,
        lg: 992,
        xl: 1200
    );

为了帮助您完成项目，最好编写嵌套贴图的贴图：

$myMap:(
  xs:(
    min-width: 564px,
    width: 200px,
    font-size: 20px
  ),
  md:(
    min-width: 768px,
    width: 300px,
    font-size: 30px
  ),
  lg:(
    min-width: 992px,
    width: 400px,
    font-size: 40px
  ),
  xl:(
    min-width: 1200px,
    width: 500px,
    font-size: 50px
  )
);

与每个值的相关性更为明显。现在我们可以编写@mixin来获取这些值：

@mixin medias($map, $key) {
  @each $keyMap, $valueMap in $map {
    @media all and (min-width: map-get($valueMap, min-width)) {
        #{$key}: map-get($valueMap, $key);
    }   
  }
}

现在我们可以把它包括在内了

@include medias($myMap, width);

这是您要求的结果：

@media all and (min-width: 564px) {
  width: 200px;
}

@media all and (min-width: 768px) {
  width: 300px;
}

@media all and (min-width: 992px) {
  width: 400px;
}

@media all and (min-width: 1200px) {
  width: 500px;
}

我发布了你的新sass文件，我想这更容易理解

$myMap:(
  xs:(
    min-width: 564px,
    width: 200px,
    font-size: 20px
  ),
  md:(
    min-width: 768px,
    width: 300px,
    font-size: 20px
  ),
  lg:(
    min-width: 992px,
    width: 400px,
    font-size: 20px
  ),
  xl:(
    min-width: 1200px,
    width: 500px,
    font-size: 20px
  )
);

@mixin medias($map, $key) {
  @each $keyMap, $valueMap in $map {
    @media all and (min-width: map-get($valueMap, min-width)) {
        #{$key}: map-get($valueMap, $key);
    }   
  }
}

@include medias($myMap, width);

我向你致敬@ReSedano。非常感谢！谢谢你，一直以来。祝福你的灵魂：>谢谢你的话，平静的波浪。在意大利，这是一个多云的星期天，所以我有时间上网，如果我能帮上忙，我感到很高兴，因为我很理解你在代码运行不正常时的感受。祝你的项目好运！；-）谢谢你的理解。在你帮助我之前真的很难弄清楚。在韩国，这里的大部分日子都是阴天。布莱德，谢谢你。您真是太好了，非常感谢！：-）这就是为什么，你永远不应该少用。
@media all and (min-width: 564px) {
  width: 200px;
}

@media all and (min-width: 768px) {
  width: 300px;
}

@media all and (min-width: 992px) {
  width: 400px;
}

@media all and (min-width: 1200px) {
  width: 500px;
}

$myMap:(
  xs:(
    min-width: 564px,
    width: 200px,
    font-size: 20px
  ),
  md:(
    min-width: 768px,
    width: 300px,
    font-size: 20px
  ),
  lg:(
    min-width: 992px,
    width: 400px,
    font-size: 20px
  ),
  xl:(
    min-width: 1200px,
    width: 500px,
    font-size: 20px
  )
);

@mixin medias($map, $key) {
  @each $keyMap, $valueMap in $map {
    @media all and (min-width: map-get($valueMap, min-width)) {
        #{$key}: map-get($valueMap, $key);
    }   
  }
}

@include medias($myMap, width);