@each с индексом

Мне было интересно, можно ли получить индекс элемента для цикла @each.

У меня есть следующий код, но мне было интересно, лучший вариант для этого был $i.

Текущий код:

$i: 0;
$refcolors: #55A46A, #9BD385, #D9EA79, #E4EE77, #F2E975, #F2D368, #F0AB55, #ED7943, #EA4E38, #E80D19;

@each $c in $refcolors {
    $i: $i + 1;
    #cr-#{$i} strong {
        background:$c;
    }   
}

Ответ 1

Прежде всего, функция @each не принадлежит компасу, а от Sass.

Чтобы ответить на ваш вопрос, это невозможно сделать с каждым циклом, но его легко преобразовать в цикл @for, который может сделать это:

@for $i from 1 through length($refcolors) {
    $c: nth($refcolors, $i);

    // ... do something fancy with $c
}

Ответ 2

Чтобы обновить этот ответ: да, вы можете достичь этого с помощью цикла @each:

$colors-list: #111 #222 #333 #444 #555;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .stuff-#{$i} { 
        color: $current-color;
    }
}

Источник: http://12devs.co.uk/articles/handy-advanced-sass/

Ответ 3

Иногда вам может понадобиться использовать массив или карту. У меня был массив массивов, т.е.:

$list = (('sub1item1', 'sub1item2'), ('sub2item1', 'sub2item2'));

Я обнаружил, что проще всего преобразовать его в объект:

$list: (
    'name': 'thao',
    'age': 25,
    'gender': 'f'
);

И используйте следующее, чтобы получить $i:

@each $property, $value in $list {
    $i: index(($list), ($property $value));

Команда sass также рекомендовала следующее, хотя я не поклонник:

[...] Вышеприведенный код - это то, как я хотел бы обратиться к этому вопросу. Это можно сделать более эффективным, добавив функцию Sass как диапазон ($ n). Таким образом, диапазон (10) = > (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Тогда перечисление может стать:

@function enumerate($list-or-map) {
    @return zip($list-or-map, range(length($list-or-map));
}

ссылка.