Динамически создавать глобальные переменные внутри mixin?

Question

Я хотел бы генерировать "цветовые веса" на основе базовых цветов.

@include generateColors(#518ef3, 'color-brand-1');

И это создаст следующие переменные:

$color-brand-1: #518ef3; //base
$color-brand-1-300: lighten(#518ef3, 20%);
$color-brand-1-400: lighten(#518ef3, 10%);
$color-brand-1-500: #518ef3;
$color-brand-1-600: darken(#518ef3, 10%);
$color-brand-1-700: darken(#518ef3, 20%);

И тогда я мог бы использовать этот цветовой спектр в приложении через имена переменных.

Answer 1

Я думаю, что это хорошая идея. Составьте карту, чтобы ваши цветовые переменные были организованы, и все готово.

Невозможно (пока) интерполировать имена функций или миксины.

@function generateColorsWeights($color){
  @return (
    100: lighten($color, 30%),
    200: lighten($color, 20%),
    300: lighten($color, 10%),
    400: lighten($color, 5%),
    500: $color,
    600: darken($color, 5%),
    700: darken($color, 10%),
    800: darken($color, 20%),
    900: darken($color, 30%)
  )
}


@each $k,$color in generateColorsWeights(#518ef3){
  %colorName-#{$k} {
    color: $color
  }
}

.color{
  @extend %colorName-200
  //or
  color: map-get(generateColorsWeights(#518ef3),200)
}