Как получить длину массива и индексы, вложенные в $ map в SCSS? - PullRequest
Новая
       16

Как получить длину массива и индексы, вложенные в $ map в SCSS?

0 голосов
/ 30 ноября 2018

В 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?

1 Ответ

0 голосов
/ 30 ноября 2018

Если вы хотите зациклить каждый элемент вашего списка на карте, вы можете сделать что-то вроде этого: 

$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;
}
...