I have a map of values in SCSS where keys are array. I need to have a result where keys are merged into a rule like this:
$rank: (
[8, 7]: red,
[6, 5]: blue,
[4, 3]: green,
[2, 1]: black,
);
I want to have a ruleset like this:
.rank .rank--8, .rank .rank--7 {
color: red;
}
.rank .rank--6, .rank .rank--5 {
color: blue;
}
.rank .rank--4, .rank .rank--3 {
color: green;
}
.rank .rank--2, .rank .rank--1 {
color: black;
}
But I can't find how can I do that. I can write something like this at least:
.rank {
@each $level, $color in $rank{
@each $level_val in $level {
& &--#{$level_val} {
color: $color;
}
}
}
}
But it will give me a ruleset like:
.rank .rank--8 {
color: red;
}
.rank .rank--7 {
color: red;
}
.rank .rank--6 {
color: blue;
}
.rank .rank--5 {
color: blue;
}
.rank .rank--4 {
color: green;
}
.rank .rank--3 {
color: green;
}
.rank .rank--2 {
color: black;
}
.rank .rank--1 {
color: black;
}
How can I achive a target ruleset?