Sass auto делает цветовые варианты с переменными

Question

У меня есть сменная цветовая палитра.

$blue, $green, $red, $purple, ...

Я сливаю это и создаю карту;

$colors: ();
$colors:
map-merge(
    (
        "grey": $grey,
        "blue": $blue,
        "violet": $violet,
        "purple": $purple,
        "pink": $pink,
        "red": $red,
        "orange": $orange,
        "yellow": $yellow,
        "olive": $olive,
        "green": $green,
        "teal": $teal
    ),$colors
);

Я написал функцию для их вызова,

@function color($key: "blue") {
  @return map-get($colors, $key);
}

И я использую функцию уровня цвета начальной загрузки (для вариантов): которая генерирует цветовые тона, которые становятся светлее и темнее с помощью черно-белых изображений.

@function color-level($color-name: "blue", $level: 0) {
  $color: color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $color-interval);
}

Я установил варианты уровней на одной карте.

$levels: ();
$levels:
map-merge(
    (
        "100": -8,
        "200": -6,
        "300": -4,
        "400": -2,
        "500": 0,
        "600": 2,
        "700": 4,
        "800": 6,
        "900": 8
    ),$colors
);

Теперь мне нужно создать новую карту вариантов с colors() и levels().Как следующий код карты:

$color-variants :

[
"grey-100": $grey-100,
"grey-200": $grey-200,
"grey-300": $grey-300,
...
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
...
...
...
]

, но все методы, которые я попробовал, не сработали ... как объединить это?

Это работает в @each, но мне нужны статические переменные.

Мой окончательный код: Codepen

Answer 1

Вы не можете интерполировать имена переменных.

Вы можете объявлять классы-заполнители для каждого варианта, а затем расширяться из класса, таким образом вы можете использовать его после цикла:

@each $name, $value in $colors {

    @each $tone, $level in $levels {

      %#{$name}-#{$tone}{
        background: color-level( #{$name} , $level);
        color: color-contrasted(color-level( #{$name} , $level));

        &:hover {
          background: 
            color-level( 
              #{$name} , 
              if(abs($level) >= 0, abs($level)-1, abs($level)+1)
            );
        }

        &:before {
          content: "#{$name} #{$tone}";
        } 

      }

      .#{$name}-#{$tone}{
        @extend %#{$name}-#{$tone}
      }

   }
}

ииспользовать его среди вашего проекта, как:

.a-div{
  @extend %pink-600; // use any color variant
}