For loop Sass循环和变量

我知道你不能用文本插入变量名，这很不幸。但是我在我的scss文件中看到了这个巨大的块，我想知道是否有任何方法可以用for循环来缩短它

      #chord1 {
    .color1 {
      color: map-get($chord1, color1);
      fill: map-get($chord1, color1);
    }
    .color2 {
      color: map-get($chord1, color2);
      fill: map-get($chord1, color2);
    }
    .color3 {
      color: map-get($chord1, color3);
      fill: map-get($chord1, color3);
    }
    .color4 {
      color: map-get($chord1, color4);
      fill: map-get($chord1, color4);
    }
    .color5 {
      color: map-get($chord1, color5);
      fill: map-get($chord1, color5);
    }
    .color6 {
      color: map-get($chord1, color6);
      fill: map-get($chord1, color6);
    }

  }
  #chord2 {
    .color1 {
      color: map-get($chord2, color1);
      fill: map-get($chord2, color1);
    }
    .color2 {
      color: map-get($chord2, color2);
      fill: map-get($chord2, color2);
    }
    .color3 {
      color: map-get($chord2, color3);
      fill: map-get($chord2, color3);
    }
    .color4 {
      color: map-get($chord2, color4);
      fill: map-get($chord2, color4);
    }
    .color5 {
      color: map-get($chord2, color5);
      fill: map-get($chord2, color5);
    }
    .color6 {
      color: map-get($chord2, color6);
      fill: map-get($chord2, color6);
    }

  }
  #chord3 {
    .color1 {
      color: map-get($chord3, color1);
      fill: map-get($chord3, color1);
    }
    .color2 {
      color: map-get($chord3, color2);
      fill: map-get($chord3, color2);
    }
    .color3 {
      color: map-get($chord3, color3);
      fill: map-get($chord3, color3);
    }
    .color4 {
      color: map-get($chord3, color4);
      fill: map-get($chord3, color4);
    }
    .color5 {
      color: map-get($chord3, color5);
      fill: map-get($chord3, color5);
    }
    .color6 {
      color: map-get($chord3, color6);
      fill: map-get($chord3, color6);
    }

  }

当我的地图是这样的：

$chord1: (color1:blue, color2: purple, color3: #eee, color4: teal, color5: green, color6: gray);

$chord2: (color1:orange,  color2: magenta, color3: gray, color4: yellow,color5: green, color6: gray);

$chord3: (color1:green ,  color2: blue,    color3: gray, color4: blue,color5: green, color6: gray);

如果不是因为变量插值问题，我可以将此SCS简化为两个嵌套的

for

循环，如下所示：

$spacers: (xs: 10px,sm: 20px, md: 30px, lg: 40px, xl: 50px);
$directions: (top, bottom);
// usage "spacer-top-sm"

@each $direction in $directions {
   @each $spacer, $amt in $spacers {
      .spacer-#{$direction}-#{$spacer} {
         margin-#{$direction}: $amt;
      }
   }
}

---

但是“技巧”在这里似乎不起作用，因为

映射get

需要实际变量。

可能有点晚了，但是下面的技巧应该可以做到

/**
 * Chord Color Mixin
 * 
 * @access public
 *
 * @requires {List} $colors - Space Deliminated list of Colors
 *
 */
@mixin chord-color($colors) {
    $i: 0;
    @each $color in $colors {
        $i: $i + 1;
        .color#{$i} {
            color: $color;
            fill: $color;
        }
    }
}

/**
 * Chord1
 */
#chord1 {
    @include chord-color(blue purple #eee teal green gray);
}

/**
 * Chord2
 */
#chord2 {
    @include chord-color(orange magenta gray yellow green gray);
}

/**
 * Chord3
 */
#chord3 {
    @include chord-color(green blue gray blue green gray);
}

在

@include

中传递的颜色将按其相关顺序添加。将新颜色添加到末尾将为当前的

#和弦创建
.color7

列表是按从左到右的顺序排列的。
可能是重复的，我看看那边有没有效果。这有点不同。