我想调用每个$lists特定值$map（$value-tree在本例中）的所有值，并为该数字创建媒体查询。
在$map我有什么看起来像这样：
$breakpoints: (
564
768
992
1200
);
$value-tree: (
width: (
80%, 70%, 400px, 500px
),
font-size: (
20px, 30px, 40px, 50px
),
color: (
lightblue, orange, lime, crimson
),
border: (
1px solid black,
4px solid orange,
7px solid brown,
10px solid lightblue
)
);
这是我的代码：
@mixin media-module($prefix, $properties...) {
@each $names, $value in $properties {
$myValue: map-get($names, $value);
$myGrid: nth($breakpoints, $myValue);
// doesn't work
@media all and (min-width: $myGrid + px) {
@each $names in $properties {
#{$names}: 123;
}
}
}
}
主要问题是这两个指令，map-get和map-values不能$values从$lists.
使用 map-get 指令调用$values：
错误：$map：“width”不是“media-module”中 scss/app.scss 第 112 行的“map-get”的地图
使用的地图值：
错误：$map: "width" 不是 `map-values' 的地图
有什么方法可以从$lists里面获取或调用值$map吗？
非常感谢。
================ 更新 12/6 ================
我让它为每个$breakpoints'值创建媒体查询的数量，但它只调用宽度的值，如下所示：
@media all and (min-width: 564px) {
.qaz {
width: 80%;
display: 80%;
border: 80%; } }
@media all and (min-width: 768px) {
.qaz {
width: 70%;
display: 70%;
border: 70%; } }
@media all and (min-width: 992px) {
.qaz {
width: 400px;
display: 400px;
border: 400px; } }
@media all and (min-width: 1200px) {
.qaz {
width: 500px;
display: 500px;
border: 500px; } }
我的第二个代码如下所示：
@mixin mqg3($prefix, $properties...) {
@each $contents, $dummy in $prefix, $properties {
$myGroup: map-get($prefix, $contents);
@each $values in $myGroup {
$myIndex: index($myGroup, $values);
$myGrid: nth($breakpoints, $myIndex);
@media all and (min-width: $myGrid + px) {
@each $names in $properties {
#{$names}: $values;
}
}
}
}
}
聚苯乙烯
感谢@Jakob 回答我，但我想让$properties它能够在内部进行检查，@include这样用户就不需要每次都向上滚动来检查$properties：
.qaz { @include mqg3($bp-values, width, display, border); }
正如我在这篇文章中试图说的：如何在 SCSS 中获取数组的 $values？，在我看来，嵌套地图可以帮助您找到更清晰和简单的解决方案：
$bp-values:(
xs:(
display: 564px,
width: 200px,
font-size: 20px,
color:lightblue,
border:1px solid black
),
md:(
display: 768px,
width: 300px,
font-size: 30px,
color:orange,
border:4px solid orange
),
lg:(
display: 992px,
width: 400px,
font-size: 40px,
color:lime,
border:7px solid brown
),
xl:(
display: 1200px,
width: 500px,
font-size: 50px,
color:crimson,
border:10px solid lightblue
)
);
@mixin mqg3($map, $keys...) {
@each $keyMap, $valueMap in $map {
@media all and (min-width: map-get($valueMap, display)) {
@each $v in $keys {
#{$v}: map-get($valueMap, $v);
}
}
}
}
每个相关性更清楚。没有必要display在您的 args 中插入 ，因为我想这是您的最小宽度：
.qaz { @include mqg3($bp-values, width, border); }
.qaz1 { @include mqg3($bp-values, color, font-size); }
这是结果：
@media all and (min-width: 564px) {
.qaz {
width: 200px;
border: 1px solid black;
}
}
@media all and (min-width: 768px) {
.qaz {
width: 300px;
border: 4px solid orange;
}
}
@media all and (min-width: 992px) {
.qaz {
width: 400px;
border: 7px solid brown;
}
}
@media all and (min-width: 1200px) {
.qaz {
width: 500px;
border: 10px solid lightblue;
}
}
@media all and (min-width: 564px) {
.qaz1 {
color: lightblue;
font-size: 20px;
}
}
@media all and (min-width: 768px) {
.qaz1 {
color: orange;
font-size: 30px;
}
}
@media all and (min-width: 992px) {
.qaz1 {
color: lime;
font-size: 40px;
}
}
@media all and (min-width: 1200px) {
.qaz1 {
color: crimson;
font-size: 50px;
}
}
编辑 1
正如您在评论中所问的那样，如果您想使用列表，这是另一种解决方案。我把你的$breakpoints和其他清单放在一起。您可以display在 args 中删除，因为默认情况下我始终将其用作min-width：
$value-tree: (
display:(
564, 768, 992, 1200
),
width: (
80%, 70%, 400px, 500px
),
font-size: (
20px, 30px, 40px, 50px
),
color: (
lightblue, orange, lime, crimson
),
border: (
1px solid black,
4px solid orange,
7px solid brown,
10px solid lightblue
)
);
@mixin mqg3($map, $keys...){
$myList:map-get($map, display);
@each $myItem in $myList {
$i: index($myList, $myItem);
@media all and (min-width: $myItem * 1px) {
@each $v in $keys {
#{$v}: nth(map-get($value-tree, $v), $i);
}
}
}
}
.qaz { @include mqg3($value-tree, width, border); }
这是输出：
@media all and (min-width: 564px) {
.qaz {
width: 80%;
border: 1px solid black;
}
}
@media all and (min-width: 768px) {
.qaz {
width: 70%;
border: 4px solid orange;
}
}
@media all and (min-width: 992px) {
.qaz {
width: 400px;
border: 7px solid brown;
}
}
@media all and (min-width: 1200px) {
.qaz {
width: 500px;
border: 10px solid lightblue;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句