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

Question

我想调用特定 $map 的每个 $lists 的所有值（在本例中为 $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:

Error: $map: "width" is not a map for 'map-get' on line 112 of scss/app.scss, in 'media-module'

使用的地图值：

Error: $map: "width" is not a map for `map-values'

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

非常感谢。

================更新 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;
                }
            }    
        }
    }
}

P.S

感谢@Jakob 回答我，但我想让 $properties 能够在 @include 内部进行检查，这样用户就不需要每次都向上滚动来检查$properties:

.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

正如我在 post 中试图说的：，在我看来，嵌套映射可以帮助您找到更清晰和简单的解决方案：

$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 ？

How would I get $values that deep inside of list in SCSS?

dictionary

directive

function

list

sass