css - Accessing an array key in SASS

Question

I have a list in SASS, and I'm trying to access on of the items by using bracket notation:

$collection[1];

but that gives me an error.

Is there any other way to do this?

---

Why do I want to do this?

I have a list of colors that have to be set on different elements according to a colors assigned to them by the server. The markup has numbered classes (color-0, color-1, etc.). Here's the CSS I'm aiming for:

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

Instead of writing it all by hand, I figured I could use a SASS collection with a loop:

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

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

but this just gives me the following error:

Syntax error: Invalid CSS after "...color-collection": expected ";", was "[ $i ];"

---

How can I accomplish this?

Answer 1

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

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: unquote(nth($color-collection, $i+1));
    }
}

Use nth(), also unquote() if you want to pass quoted strings.

Though, I personally wouldn't:

$color-collection: (red, rgba(50,50,80, .5), darken(green, 50%), rgba(blue, .5));

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: nth($color-collection, $i+1);
    }
}

Because then you can pass any color object.