SCSS @each 循环可以包含多个地图吗？答案

【问题标题】：Can a SCSS @each loop contain multiple maps?SCSS @each 循环可以包含多个地图吗？
【发布时间】：2019-07-13 05:13:09
【问题描述】：

我正在尝试构建一个 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);
}

【问题讨论】：

您是否需要每种不透明度的颜色或不透明度为 1 的颜色 1 等？
我需要每一种颜色都有每一种不透明度。我希望能够调用具有 50% 不透明度的红色 (class="bg-red-50") 或具有 25% 不透明度 (class="bg-green-25") 的绿色或我需要的任何其他组合的 CSS 类.
我认为做你想做的唯一方法是在另一个循环中嵌套一个循环。

标签： loops sass maps each scss-mixins

【解决方案1】：

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

嵌套循环以生成您的类。

【讨论】：

这确实有效！但是，在我的特定情况下，我使用变量而不是颜色值中的颜色名称。在编译过程中，当颜色为变量时，不接受 rgba 格式的值。这是解决这个问题的方法吗？