map - 如何在定义整个 map 之前引用 map 中的变量？

Question

我将从我的代码开始，因为它应该更容易理解我想要做什么:

@function get-color($color, $lightness) {
  @return map-get(map-get($colors, $color), $lightness);
}

$colors: (
  green: (
    light: #A4EDE1,
    mid: darken(get-color(green, light), 20%),
    dark: darken(get-color(green, mid), 20%)
  ),

  red: (
    light: complement(get-color(green, light)),
    mid: complement(get-color(green, mid)),
    dark: complement(get-color(green, dark))
  )
);

如您所见，我使用我的颜色值创建了一个多维 map 。
目前，我想通过 darken() 创建其他颜色。和 complement()职能。
问题是，我需要引用 $colors 内部的变量变量，在它完全填充之前。这导致我的 get-color() 出错函数，它告诉我，没有 $colors多变的。

我知道可以改变我的 $colors 之外的颜色 map ，但这样做的好处是，我总是可以回来定义颜色值，这些值不是生成的。这将是维护项目的巨大好处。

所以我的问题是:在定义整个 map 之前，有没有办法在 map 中引用另一个变量？

Answer 1

不。直到你到达最后的分号，映射才被定义。所以在那之前你不能引用它的任何部分。

$base-color: #A4EDE1;
$colors: (
  green: (
    light: $base-color,
    mid: darken($base-color, 20%),
    dark: darken($base-color, 40%)
  ),
);

$colors: map-merge($colors, (
  red: (
    light: complement(get-color(green, light)),
    mid: complement(get-color(green, mid)),
    dark: complement(get-color(green, dark))
  )));

.foo {
  color: get-color(red, mid);
}

除非您循环映射，否则我建议不要使用映射来存储您的颜色变量。相反，最好简单地编写一个函数来为您进行操作:

$base-color: #A4EDE1;

@function get-color($lightness, $variation: null, $color: $base-color) {
  $color: if($variation, call($variation, $color), $color);

  @if $lightness == medium {
    @return darken($color, 20%);
  } @else if $lightness == dark {
    @return darken($color, 40%);
  }
  @return $color;
}

.foo {
  color: get-color(mid);
  border: 1px solid get-color(mid, complement);
}