在定义整个地图之前，如何引用地图中的变量？ [英] How to reference variables in a map, before the whole map is defined?

问题描述

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

I’ll start with my code, as it should be easier to understand what I want to do:

@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（）功能。
这个问题是，我需要在$ code $ $ 变量之前引用变量，然后才能完全填充。这导致我的 get-color（）函数的错误，这告诉我，没有 $ colors 变量

As you can see, I have created a multidimensional map, with my color values.
At the moment, I want to create the other colors, through the darken() and the complement() functions. The problem with that is, that I need to reference variables inside of the $colors variable, before it is completely filled. This results in an error for my get-color() function, which tells me, there is no $colors variable.

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

I know it would be possible to alter the colors outside of my $colors map, but the benefit of doing it this way is, that I can always come back and define color values, that are not generated. This would be a huge benefit in maintaining the project.

所以这里我的问题：在定义整个地图之前，是否有任何方法引用地图中的另一个变量？ / p>

So here my question: Is there any way to reference another variable in map, before the whole map is defined?

推荐答案

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

No. The mapping isn't defined until you reach that semicolon at the end. So you cannot reference any portion of it until then.

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

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

Unless you're looping over the mapping, I would recommend not using mappings to store your color variables. Rather, it would be better to simply write a function that will do the manipulation for you:

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

这篇关于在定义整个地图之前，如何引用地图中的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！