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

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

1 个答案: