Sass 循环和变量

Question

我已经知道您不能在文本中插入变量名，这很不幸。但是我在我的 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);

如果不是因为变量插值问题，我可以将此 scss 缩减为两个嵌套的 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;
      }
   }
}

但由于map-get 需要实际变量，因此“技巧”似乎在这里行不通。

Answer 1

可能有点晚了，但以下应该可以解决问题！

/**
 * 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 中传递的颜色将按相关顺序添加。在末尾添加新颜色将为当前的#chord 创建一个.color7。

列表按照将要编译的顺序从左到右排列。