在定义整个映射之前，如何引用映射中的变量？

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

@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地图，但这样做的好处是，我可以随时返回并定义未生成的颜色值。这对于维护该项目将是一个巨大的好处。

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

不。直到到达末尾的分号时才定义映射。因此在此之前您无法引用其中的任何部分。

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

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

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