Блог

У меня есть карта значений в SCSS, где ключи являются массивом. Мне нужен результат, в котором ключи объединяются в правило, подобное этому:

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

Я хочу, чтобы у меня был такой набор правил, как этот:

 .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;
}
 

Но я не могу понять, как я могу это сделать. Я могу написать что-то вроде этого, по крайней мере:

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

Но это даст мне набор правил, таких как:

 .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;
}
 

Как я могу достичь целевого набора правил?