Acceder a una variable anidada de SASS

¿Cómo podemos obtener una variable «anidada» con SASS?

Puede que necesitemos acceder a uno de los colores definidos:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

Si probamos a poner:

.elemento {
    background-color: $primary
}

La consola nos dirá:

sass: src/app/app.scss, line: 19
Undefined variable: «$primary».

Porque realmente no está definida.
Si quisiésemos acceder a primary deberíamos escribirlo utilizando la función map-get:

.elemento {
    background-color: map-get($colors, primary);
}

Done!


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*