sass - 在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

我认为这是个好主意。做一个地图来保持你的颜色变量有条理，你很高兴。

（还）不可能插入函数或 mixin 名称。

@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)
}