DRY添加颜色（及其变体）：

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

DRY添加颜色（及其变体）：

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

DRY生成选择器：

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

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

但是，这通常不是一个好主意，因为它会使您在IDE中的搜索选择器变得更难。如果你真的会有这么多不同的颜色，那么可能值得考虑使用这种技术。

在DRYer代码的地图内循环Sass

1 个答案:

DRY添加颜色（及其变体）：

DRY生成选择器：