Ich habe eine Liste in SASS und versuche, mithilfe der Klammernotation auf eines der Elemente zuzugreifen:

$collection[1];

aber das gibt mir einen fehler.

Gibt es eine andere Möglichkeit, dies zu tun?

Warum möchte ich das tun?

Ich habe eine Liste von Farben, die für verschiedene Elemente entsprechend den vom Server zugewiesenen Farben festgelegt werden müssen. Das Markup hat nummerierte Klassen (color-0, color-1, usw.). Hier ist das CSS, das ich anstrebe:

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

Anstatt alles von Hand zu schreiben, dachte ich, ich könnte eine SASS-Sammlung mit einer Schleife verwenden:

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

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

aber das gibt mir nur den folgenden fehler:

Syntaxfehler: Ungültiges CSS nach "... color-collection": erwartet ";", war "[$ i];"

Wie kann ich das erreichen?