F
F
Fedooot012021-10-14 11:29:30
Sass
Fedooot01, 2021-10-14 11:29:30

How to combine map keys into a ruleset in SCSS?

Hello, I have a map with data like this:

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


I need to get a set of rules like this:
.rank--8, .rank--7 {
   color: red;
}
.rank--6, .rank--5 {
   color: blue;
}
.rank--4, .rank--3 {
   color: green;
}
.rank--2, .rank--1 {
   color: black;
}


So far, nothing better than this has come up:
.rank {
   @each $level, $color in $rank{
      @each $level_val in $level {
         &--#{$level_val} {
            color: $color;
         }
      }
   }
}


But this is not quite what you need, the result is like this:
.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;
}


How can you achieve the desired result?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question