Как автоматически создать классы с цветами от яркости до темноты?

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:

Answer 1

Вы можете работать с вложенными картами => https://sass -lang.com / Документация / Значения / Карты

Итак, прежде всего создайте вложенную карту:

$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-карты / с использованием 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;
}