How to merge map keys into a rule in SCSS?

Viewed 57

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?

0 Answers
Related