Как объединить ключи map в набор правил в SCSS?

Question

[Fedooot01]

Здравствуйте, у меня есть map с такими данными:

$rank: (
   [8, 7]: red,
   [6, 5]: blue,
   [4, 3]: green,
   [2, 1]: black,
);

Мне нужно получить набор правил такого типа:

.rank--8, .rank--7 {
   color: red;
}
.rank--6, .rank--5 {
   color: blue;
}
.rank--4, .rank--3 {
   color: green;
}
.rank--2, .rank--1 {
   color: black;
}

Пока ничего лучше чем это придумать не получилось:

.rank {
   @each $level, $color in $rank{
      @each $level_val in $level {
         &--#{$level_val} {
            color: $color;
         }
      }
   }
}

Но это не совсем то, что надо, результат выходит вот таким:

.rank--8 {
   color: red;
}
.rank--7 {
   color: red;
}
.rank--6 {
   color: blue;
}
.rank--5 {
   color: blue;
}
.rank--4 {
   color: green;
}
.rank--3 {
   color: green;
}
.rank--2 {
   color: black;
}
.rank--1 {
   color: black;
}

Как можно достигнуть нужного результата?

Comments

[Ankhena]

Во-первых, не без разницы ли?
Во-вторых, можно прогнать через минификатор типа csso

[Fedooot01]

Ankhena, а если тело будет побольше, чем просто color: цвет, а количество ключей массива не 2, а 10? Без разницы это не вариант. Интересует как это можно сделать возможностями языка.

[Ankhena]

Fedooot01,

Без разницы это не вариант.

В минифицированном файле они все соберутся через запятую (если не запретите).
Если использовать csso c restructure: true, то все селекторы сгруппируются.

а количество ключей массива не 2, а 10

Я бы в таком случае стала делать отдельные классы под цвет, чем 10 классов с одинаковым содержимым.