Перебор массива (sass/scss)?

Question

[Михаил Р.]

Приветствую!

Не могу понять несколько моментов в переборе массивов в scss:
1. Как в цикле получить номер ячейки массива? Например если сейчас мы находимся в item3, то номер должен быть 3...
2. Как в цикле получить название ячейки (item3 например)?
3. Как в цикле получить содержимое ячейки (red например)?
4. Как Вы перебрали бы такой массив?

Спасибо!

$colors: (
        item1: green,
        item2: orange,
        item3: red,
        item4: blue,
        item5: lime
);

// визуально накидал цикл, чтобы было более нагляднее то, что я хочу узнать...
@for $i from 1 through length($colors)
{
  .test-#{$number-array}-#{$name-array}
  {
    color: #{$value-array};
  }
}

Answer 1

[iljaGolubev]

$colors: (
        item1: green,
        item2: orange,
        item3: red,
        item4: blue,
        item5: lime,
);

.test {
  @each $key, $color in $colors {
    $index: index($colors, ($key $color));
    &-#{$index}-#{$key} {
        color: $color;
    }
  }
}

Answer 2

[andead]

@each $key, $color in $colors {
    $index: index($colors, $color);
    .test-#{$index}-#{$key} {
        color: $color;
    }
}