Sassのネストされたマップから値とキーを取得しようとしています(具体的にはlibsassを使用しています)。
親マップを正常にループしていますが、各子マップの各アイテムの値とキーを取得する必要があります。
これはすべてSassmeisterにあり、おそらく最も簡単に確認できる場所です: http://sassmeister.com/gist/04ba839b0edff4b84a93
私の地図:
$grids: (
2: (
$med-2: 2,
),
3: (
$med-2: 2,
$max-width: 3
),
4: (
$med-2: 2,
$med-3: 3,
$max-width: 4
),
5: (
$med-2: 2,
$med-3: 3,
$large-1: 4,
$max-width: 5
),
6: (
$med-2: 2,
$med-3: 3,
$large-1: 5,
$max-width: 6
)
);
私のミックスイン:
@mixin media-grid($base-class: "media-grid") {
.#{$base-class} {
border: 1px solid black;
}
@each $cols, $bp in $grids {
.#{$base-class}--#{$cols} li {
@for $i from 1 through length($bp) {
@media ( min-width: map-deep-get($grids, $cols, $i) ) {
// min-width: Should be the key. $i is certainly incorrect.
max-width: 100/$cols + %;
// Instead of $cols, should divide by the value
}
}
}
}
}
参考までに:これも一部ですが、正しく機能しています:
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}