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

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))
  )
);

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

我知道可以更改$colors地图外的颜色，但这样做的好处是，我可以随时返回并定义颜色值，这些值不会生成。这将是维护项目的巨大好处。

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

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