Css Sass循环中的一个映射用于烘干机代码

如何使以下代码更干燥？ 我在下面设置了一组变量，这些变量后来在

$colors

映射中引用。目前，我必须在两个地方编辑代码，以便为系统添加新颜色。这些可变的数字在未来会有很大的增长

这是整个当前代码部分

$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)
  }
)

干法添加颜色（及其变化）： 有一个很好的例子，描述了如何做得更好，这是我无法解释的。基本上，您创建一个颜色列表，然后创建一个变体列表，其中包含应该应用什么函数来修改该函数的颜色和参数。最后，您可以创建一个界面/一个简单易用的函数来获取最终的颜色值。重要的是，所有颜色和可能的变化都在一个地方声明

干式生成选择器： <> P>另一件事你可以考虑的是生成所有这些选择器的方法。您可以使用指令遍历所有颜色和变体，并在一个位置生成所有选择器/类。比如：

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

---

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

嗨，谢谢你的回答，我会通读你发送的文章。它看起来相当广泛！是的，我一定会在某个时候生成选择器。谢谢你的片段！如果我发现那篇文章帮助了Hi Kamyl，我会接受你的回答。你发的这篇文章似乎不适合使用对我来说必不可少的

色标
方法。这是我能避免从生成的颜色中得到纯黑色和白色的唯一方法。我能看到问题所在。您可以这样做：
调用（比例颜色，#cc0000，$lightness:88%）
。您不希望在
scale-color（）
中提供$lightness之前的
$red
、
$green
、
$blue
参数。这是一个非常有趣的例子，我不知道如何解决这个问题，抱歉。实际上，您可以创建自己的函数来包装
scale color
，但只接收您关心的参数（跳过$red、$green、$blue）。类似于
@function scale color only lightness（$color，$lightness）{@return scale color（$color，$lightness:$lightness）；}
。这样，您就可以像本文示例中介绍的任何其他函数一样使用它。这是我能想到的最简单的方法（也是目前唯一的一种方法）。您可以尝试的另一件事是在
$variations
参数中存储另一个列表，该列表也会存储参数名称。然后以某种方式构建您的
$args…
以使用@each指令在
调用（）中使用，并执行类似于
@each$parameter name，$parameters中的参数值{$args.join（$args，/*magic*/）}
的操作。如果你选择这样做并成功，请分享；我很想看看