У меня есть список в SASS, и я пытаюсь получить доступ к элементам, используя скобки:

$collection[1];

но это дает мне ошибку.

Есть ли другой способ сделать это?

Почему я хочу это сделать?

У меня есть список цветов, которые должны быть установлены для разных элементов в соответствии с цветами, назначенными им сервером. Разметка имеет пронумерованные классы (color-0, color-1, и т.д.). Вот CSS, к которому я стремлюсь:

.color-0 { color: red }
.color-1 { color: orange }
.color-2 { color: green }
.color-3 { color: blue }
/* many more, with more complex colors... */

Вместо того чтобы писать все вручную, я решил использовать коллекцию SASS с циклом:

$color-collection: ('red', 'orange', 'green', 'blue');
$color-count: length($color-collection);

@for $i from 0 to $color-count {
    .color-#{$i} {
        color: $color-collection[ $i ];
    }
}

но это просто дает мне следующую ошибку:

Синтаксическая ошибка: неверный CSS после "... color-collection": ожидается ";", было "[$ i];"

Как я могу сделать это?