如何在SCSS中获取Array的$values

Question

我正在制作自己的插件，通过在SCSS中写入单个@include行，可以自动进行多个媒体查询。

所以当我输入@include medias($bp-values, 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;
}

这是代码：

$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-queries'宽度的前缀。

但代码没有运行，我得到了这个：

错误：未定义的变量："$num"。

大多数空闲的解决方案是在单个@each指令中合并2$映射，但SCSS似乎不支持这一点。

有什么办法解决这个问题吗？

Answer 1

在我看来，您不太了解映射和列表之间的区别。

该列表是值的array：

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

或

$breakpoints: 564, 768, 992, 1200;

或

$breakpoints: 564 768 992 1200;

所以这个@return map-get($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);