studio - ¿Cómo hacer referencia a las variables en un mapa, antes de que se defina todo el mapa?

mapa data studio

Question

Comenzaré con mi código, ya que debería ser más fácil entender lo que quiero hacer:

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

Como pueden ver, he creado un mapa multidimensional con mis valores de color.
Por el momento, quiero crear los otros colores, a través de las funciones de darken() y complement() . El problema con eso es que necesito hacer referencia a las variables dentro de la variable $colors , antes de que esté completamente lleno. Esto da como resultado un error para mi función get-color() , que me dice que no hay $colors variable $colors .

Sé que sería posible modificar los colores fuera de mi mapa de $colors , pero el beneficio de hacerlo de esta manera es que siempre puedo volver y definir los valores de color que no se generan. Esto sería un gran beneficio para mantener el proyecto.

Así que aquí mi pregunta: ¿hay alguna manera de hacer referencia a otra variable en el mapa, antes de que se defina todo el mapa?

Answer 1

No. La asignación no está definida hasta que llegue a ese punto y coma al final. Entonces no puedes hacer referencia a ninguna porción hasta ese momento.

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

A menos que esté revisando el mapeo, le recomendaría que no use asignaciones para almacenar sus variables de color. Más bien, sería mejor simplemente escribir una función que te haga la manipulación:

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