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.

Answer 2

You can use @each rule instead of @for, which is more semantic, faster, and it makes the code shorter:

$color-collection: (red, orange, green, blue);  @each $color in $color-collection {     .color-#{$color} {         color: $color;     } } 

Or if you prefer you can use $color-collection list directly into the @each directive:

@each $color in red, orange, green, blue {     .color-#{$color} {         color: $color;     } } 

As @bookcasey says is preferable to use unquoted strings because then you can pass any color object or function

Sass reference for @each directive