Sass how to access variables' list - css

Question

$red:"#111", "#222", "#333";
$orange: "#444", "#555","#666";
$green: "#777","#888","#999";
$color-collection: $red, $orange, $green;
#each $color in $color-collection {
.color {
#for $i from 1 through length($color-collection) {
$c: nth($color-collection, $i);
.colours--#{$i} {
background: $c;
}
}
}
}
The output prints all colours,
.color .colours--1 {
background: "#111", "#222", "#333";
}
.color .colours--2 {
background: "#444", "#555", "#666";
}
.color .colours--3 {
background: "#777", "#888", "#999";
}
I want to print as #each, so how to access $color-collection's $red? doesn't look like this $color-collection[$red]
I want to print like below
.color .colours--1 {
background: "#111";
}
.color .colours--2 {
background: "#222";
}
.color .colours--3 {
background: "#333";
}
and so on

Answer 1

You were almost there, I've modified your code slightly to get the result you are after!
You can view the working demo here.
$red:"#111", "#222", "#333";
$orange: "#444", "#555","#666";
$green: "#777","#888","#999";
$color-collection: $red, $orange, $green;
#each $color in $color-collection {
.color {
#for $i from 1 through length($color-collection) {
$c: nth($color, $i);
.colours--#{$i} {
background: $c;
}
}
}
}
Although this does answer your question, in it's current setup each loop overwrites the previous class, so just be aware of this ...

Answer 2

This will put you on the correct path I think.
What I use to do, is use maps, and map-get property, like this:
#function color($collection, $key) {
#if map-has-key($collection, $key) {
#return map-get($collection, $key);
}
#warn "Unknown `#{$key}` in $collection.";
#return null;
}
$red: "#111", "#222", "#333";
$orange: "#444", "#555", "#666";
$green: "#777", "#888", "#999";
$colorcollection: (red: $red, orange: $orange, green: $green);
.element {
color: color($colorcollection, red);
}
You only have to repeat the sentence for each element in the color, to achieve exactly what you're trying to get.
You can see running example here:
Sassmeister example

Answer 3

Give this a shot:
$red: "#111", "#222", "#333";
$orange: "#444", "#555", "#666";
$green: "#777", "#888", "#999";
$color-collection: join($red, $orange);
$color-collection: join($color-collection, $green);
#each $color in $color-collection {
.color {
#for $i from 1 through length($color-collection) {
$c: nth($color-collection, $i);
.colours--#{$i} {
background: $c;
}
}
}
}
This does exactly what you want however its not going to scale well at all.
You need to join the lists together into one list instead of an list of lists.