DRYer代码映射内的Sass循环

Question

如何使下面的代码变得更枯燥？我在下面设置了一些变量，这些变量稍后将在$colors映射中引用。目前，我必须编辑代码在两个地方，以添加一个新的颜色到系统。这些变量的数量在未来会有很大增长。

https://codepen.io/umbriel/pen/LLvPPK这里是整个当前代码部分

$red : #cc0000;
$blue : #1e8cea;
$green : #27a249;
$teal : #41bdbb;
$purple : #5c369e;
$-yellow : #ecd340;

@function color-palette($color) {  
  $map: (
     light: scale-color($color, $lightness: 88%),
     lighter: adjust-hue(scale-color($color, $lightness: 48%, $saturation: 32%), -8%),
     base: $color,
     darker: adjust-hue(scale-color($color, $lightness: -36%), 0%),
     dark: scale-color($color, $lightness: -72%, $saturation: 100%)
  );
  @return $map;
}

$colors: (
 red: color-palette($red),
 blue: color-palette($blue),
 green: color-palette($green),
 teal: color-palette($teal),
 purple: color-palette($purple),
 yellow: color-palette($yellow)
);

// retrieve color from map ie. `color(primary, base)`
@function color($color-name, $color-variant:null) {
  // color variant is optional
  @if ($color-variant != null) {
    // map inception

    @return map-get(map-get($colors, $color-name), $color-variant);
  } @else {
    @return map-get(map-get($colors, $color-name), base);
  }
} 

我已经尝试过在$colors地图中循环这个地图，但这是行不通的。

$colorvars : (    
  red : #cc0000,
  blue : #1e8cea,
  green : #27a249,
  teal : #41bdbb,
  purple : #5c369e,
  yellow : #ecd340
)

$colors: (
  @each $key, $value in $colorsvars {
    $key : color-palette($value)
  }
)

Answer 1

干加色(及其变体)：

有一个很好的文章描述了如何做得比我能解释的更好。基本上，您创建一个颜色列表，然后列出包含应该应用什么函数来修改该函数的颜色和参数的变体列表。最后，您可以创建一个界面/一个简单易用的函数来获得最终的颜色值。重要的是，所有的颜色和可能的变化都在一个地方宣布。

干生成选择器：

您可能考虑的另一件事是生成所有这些选择器的方法。您可以使用@每一个指令遍历所有颜色和变体，并在1处生成所有选择器/类。类似于：

@each $color in $colors {
  @each $variation in $variations {
    .c-#{$color}-#{$variation} {
      background-color: a-nice-function-to-get-color($color, $variation);
    }
  }
}

然而，这通常不是一个好主意，因为它使得在IDE中搜索选择器变得更加困难。如果你真的要有这么多不同的颜色，那么使用这种技术也许是值得的。