У меня есть список в 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];"
Как я могу это сделать?