Tengo una lista en SASS, y estoy tratando de acceder a uno de los elementos utilizando la notación de corchetes:

$collection[1];

Pero eso me da un error.

Hay alguna otra manera de hacer esto?

¿Por qué quiero hacer esto?

Tengo una lista de colores que se deben configurar en diferentes elementos de acuerdo con los colores asignados por el servidor. El marcado tiene clases numeradas (color-0, color-1, etc.). Aquí está el CSS al que apunto:

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

En lugar de escribirlo todo a mano, pensé que podría usar una colección SASS con un bucle:

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

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

Pero esto solo me da el siguiente error:

Error de sintaxis: CSS no válido después de "... color-collection": expected ";", era "[$ i];"

¿Cómo puedo lograr esto?