Может ли цикл SCSS @each содержать несколько карт?

Question

Я пытаюсь создать цикл SCSS @each, который вызывает цвет из одной карты и непрозрачность из другой карты.

Я обнаружил, что это можно сделать с помощью списков переменных, однако можнобыть сделано с картами?

Пример кода:

$colors: (
  red: red,
  orange: orange,
  yellow: yellow,
  green: green, 
);

$opacities: (
  00: 0.0,
  25: 0.25,
  50: 0.5,
  75: 0.75,
  100: 1,
);

@each $color, $opacity in zip($colors, $opacities) {
    .bg-#{$color}-#{$opacity} {
        @include bg-color-op(#{$color}, #{$opacity});
    }
}

@mixin bg-color-op($bg-color, $bg-opacity) {
   background-color: rgba($bg-color, $bg-opacity);
}

Answer 1

 @each $color-key,  $color-value in $colors{
    @each $opacity-key, $opacity-value in $opacity {
            // Use key values of map to generate desired classes
     }
   } 

Nest циклы для генерации ваших классов.