Question

在SCSS中，我试图获取嵌套另一个$map的索引。

我有一张看起来像的地图：

$bp-values: (
    width: (
        200px, 300px, 400px, 500px
    ), // array.
    font-size: (
        20px, 30px, 40px, 50px
    )
);

这就是我尝试获取@function中的索引的方式

@function test($map, $keys...) {

    @each $val in $keys {

        @for $val from 0 to length($map) {
            #{$keys}: $val;
        }
    }
    @return $map;
};

当我添加@for这样的方法时，该功能不起作用。我一直在Google上搜索有关此问题的信息，但根本没有解决方案。

有人知道如何获取SCSS中$ map（嵌套）中的数组索引吗？

Answer 1

如果要在地图中列表的每个项目上循环播放，可以执行以下操作：

$bp-values: (
    width: (
        200px, 300px, 400px, 500px
    ), 
    font-size: (
        20px, 30px, 40px, 50px
    )
);

@mixin media-module($map, $key){
  $myList:map-get($map, $key);

  @each $myItem in $myList {
    $i: index($myList, $myItem);
    .someElement-#{$i} { 
        #{$key}: $myItem;
    }
  }
}

然后包含该混合：

div{
  @include media-module($bp-values, width)
}

div{
  @include media-module($bp-values, font-size)
}

您的输出将是：

div .someElement-1 {
  width: 200px;
}
div .someElement-2 {
  width: 300px;
}
div .someElement-3 {
  width: 400px;
}
div .someElement-4 {
  width: 500px;
}

div .someElement-1 {
  font-size: 20px;
}
div .someElement-2 {
  font-size: 30px;
}
div .someElement-3 {
  font-size: 40px;
}
div .someElement-4 {
  font-size: 50px;
}

如何获取嵌套在SCSS中$ map中的数组的长度和索引？

1 个答案: