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

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

Sass循环和变量

1 个答案: