0

I'm trying to build a SCSS @each loop which calls a color from one map, and an opacity from another map.

I've found this can be done with variable lists, however can it be done with maps?

Example code:

$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);
}
410er0r
  • 3
  • 2
  • Do you need every color with every opacity or color 1 with opacity 1 etc. ? – Arkellys Feb 19 '19 at 17:35
  • I need every color to have every opacity. I want the ability to call a css class with red at 50% opacity (class="bg-red-50") or green with a 25% opacity (class="bg-green-25") or any other combination I need. – 410er0r Feb 20 '19 at 15:54
  • I think the only way to do what you want is to nest a loop in another loop. – Arkellys Feb 21 '19 at 08:11

1 Answers1

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

Nest loops to generate your classes .

Deepak0174
  • 47
  • 5
  • This does work! However, in my particular case, I'm using variables instead of the color names in the color values. During the compiling, the values are not accepted in the rgba format when the color is a variable. Is this a way around this? – 410er0r Feb 27 '19 at 20:49