html - 如何使用从亮度到黑暗的颜色自动生成类？

Question

我是 SASS 新手，我正在尝试使用特定列自动生成类。

例如，我有颜色变量：

$ccom-grey: (
100: #e7e7e7,
200: #d0d0d0,
400: #bababa,
500: #a4a4a4,
600: #8e8e8e,
800: #797979,
900: #505050
);

$ccom-green: (
100: #6DDD4F,
200: #58D935,
400: #43D41C,
500: #2ECF03,
600: #29BA03,
800: #25A602,
900: #209102
);

和方法（我不确定我做对了）：

@mixin generate-color-classes($colorName, $color, $hue) {

.#{$colorName}#{$hue}-bg {
background-color: $color !important;
}

.#{$colorName}#{$hue}-border {
border-color: $color !important;
}
}

我应该如何为每个值生成颜色，例如 CCOM-GREY-100 我还想.#ccom-grey-100-bg用 CCOM-GREY-100 的颜色生成类。我真的不知道该怎么做。也许有人可以帮助我？谢谢

应用后从@ReSedano 更改

我收到此错误：

编辑2：

标签： htmlcsssass

Answer 1

您可以使用嵌套地图 => https://sass-lang.com/documentation/values/maps

所以，首先创建一个嵌套地图：

$colors:(
  ccom-grey: (
    100: #e7e7e7,
    200: #d0d0d0,
    400: #bababa,
    500: #a4a4a4,
    600: #8e8e8e,
    800: #797979,
    900: #505050
  ),
  ccom-green: (
    100: #6DDD4F,
    200: #58D935,
    400: #43D41C,
    500: #2ECF03,
    600: #29BA03,
    800: #25A602,
    900: #209102
  )
);

然后你可以使用 double @each来遍历每个键/值对$colors：

@each $name, $hues in $colors {
  @each $n, $hex in $hues {
    .#{$name}-#{$n}-bg {
      background-color: $hex !important;
    }

    .#{$name}-#{$n}-border {
      border-color: $hex !important;
    }
  }
}

输出是你所有的类：

.ccom-grey-100-bg {
  background-color: #e7e7e7 !important;
}

.ccom-grey-100-border {
  border-color: #e7e7e7 !important;
}

.ccom-grey-200-bg {
  background-color: #d0d0d0 !important;
}

.ccom-grey-200-border {
  border-color: #d0d0d0 !important;
}

.ccom-grey-400-bg {
  background-color: #bababa !important;
}

.ccom-grey-400-border {
  border-color: #bababa !important;
}

.ccom-grey-500-bg {
  background-color: #a4a4a4 !important;
}

.ccom-grey-500-border {
  border-color: #a4a4a4 !important;
}

.ccom-grey-600-bg {
  background-color: #8e8e8e !important;
}

.ccom-grey-600-border {
  border-color: #8e8e8e !important;
}

.ccom-grey-800-bg {
  background-color: #797979 !important;
}

.ccom-grey-800-border {
  border-color: #797979 !important;
}

.ccom-grey-900-bg {
  background-color: #505050 !important;
}

.ccom-grey-900-border {
  border-color: #505050 !important;
}

.ccom-green-100-bg {
  background-color: #6DDD4F !important;
}

.ccom-green-100-border {
  border-color: #6DDD4F !important;
}

.ccom-green-200-bg {
  background-color: #58D935 !important;
}

.ccom-green-200-border {
  border-color: #58D935 !important;
}

.ccom-green-400-bg {
  background-color: #43D41C !important;
}

.ccom-green-400-border {
  border-color: #43D41C !important;
}

.ccom-green-500-bg {
  background-color: #2ECF03 !important;
}

.ccom-green-500-border {
  border-color: #2ECF03 !important;
}

.ccom-green-600-bg {
  background-color: #29BA03 !important;
}

.ccom-green-600-border {
  border-color: #29BA03 !important;
}

.ccom-green-800-bg {
  background-color: #25A602 !important;
}

.ccom-green-800-border {
  border-color: #25A602 !important;
}

.ccom-green-900-bg {
  background-color: #209102 !important;
}

.ccom-green-900-border {
  border-color: #209102 !important;
}

编辑 1：要获得嵌套地图的值，我在这里找到了一个很好的解决方案 => https://css-tricks.com/snippets/sass/deep-getset-maps/使用map-deep-get函数：

@function map-deep-get($map, $keys...) {
    @each $key in $keys {
        $map: map-get($map, $key);
    }
    @return $map;
}

并使用它：

div{
  color: map-deep-get($colors, ccom-green, 100);
}

你的输出：

div {
  color: #6DDD4F;
}