在我看来,您不太了解地图和列表之间的区别。
该列表是一个array
值:
$breakpoints: (
564,
768,
992,
1200
);
or
$breakpoints: 564, 768, 992, 1200;
or
$breakpoints: 564 768 992 1200;
So this @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);