Question

我想从特定$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”不是“ map-get”的地图在scss / app.scss的第112行上的“媒体模块”中

使用的地图值：

错误：$ map：“宽度”不是“ map-values”的地图

是否有任何方法可以从$lists内部的$map获取或调用值？

非常感谢。

===============更新12/6 ===============

我可以为每个$breakpoints'值创建媒体查询数量，但是它仅调用width的值，如下所示：

@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;
                }
            }    
        }
    }
}

PS

感谢@Jakob回答我，但我想让$properties可以在@include内部进行检查，因此用户无需每次向上滚动来检查{{ 1}}：

.qaz {@include mqg3（$ bp-values，width，display，border）; }

Answer 1

我认为您想要这样的东西

SCSS

@mixin media-module {
  $index: 1;
  @each $bp in $breakpoints {
    @media all and (min-width: $bp * 1px){
      @each $key, $list in $value-tree {
        #{$key}: nth($list, $index);
      }
      $index: $index + 1; 
    }
  }
}

.class {
  @include media-module;
}

CSS输出

@media all and (min-width: 564px) {
  .class {
    width: 80%;
    font-size: 20px;
    color: lightblue;
    border: 1px solid black;
  }
}
@media all and (min-width: 768px) {
  .class {
    width: 70%;
    font-size: 30px;
    color: orange;
    border: 4px solid orange;
  }
}
@media all and (min-width: 992px) {
  .class {
    width: 400px;
    font-size: 40px;
    color: lime;
    border: 7px solid brown;
  }
}
@media all and (min-width: 1200px) {
  .class {
    width: 500px;
    font-size: 50px;
    color: crimson;
    border: 10px solid lightblue;
  }
}

Answer 2

正如我在这篇帖子中试图说的：How to get $values of Array in SCSS?，我认为嵌套地图可以帮助您找到更清晰，更简单的解决方案：

$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，因为我想这是您的最小宽度：

.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与其他列表放在一起。您可以将args中的display删除，因为默认情况下，我始终将其用作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;
  }
}

我将如何获得SCSS列表中深层的$ values？

2 个答案: