1

tengo un problema con el método map-get en SASS.

Al ejecutar el siguiente codigo

$colors: (
  darkTurquoise: #6bc9c4,
  lightTurquoise: #9bdad5,
);

$themeConfig: (
  linkColor: map-get($colors, "darkTurquoise"),
  linkColorBg: map-get($colors, "lightTurquoise")
);

a {
  color: map-get($themeConfig, "linkColor");
  background: map-get($themeConfig, "linkColorBg");
  text-decoration: none;
}

Obtengo el siguiente resultado:

a {
  background: #9bdad5;
  text-decoration: none;
}

Como pueden ver la propiedad "color" de la etiqueta "a" no ha sido compilada sin embargo la propiedad "background" si compilo sin problemas.

Hice pruebas con node-sass en webpack y en sassmeister y en ambos obtengo el mismo resultado.

Alguien sabe que estoy haciendo mal?.

1 respuesta 1

2

Nunca he usado SASS, pero mirando la documentación he descubierto la función inspect( ). Usándola, vemos que

a {
  color: inspect( map-get( $colors, "darkTurquoise" ) );
}

produce

a { color: null; }

Haciendo algunas pruebas mas

$colors: (
  darkTurquoise: #000000
);

$themeConfig: (
  linkColor: map-get($colors, "darkTurquoise")
);

a {
  color: inspect( map-get( $colors, "darkTurquoise" ) );
}

a { color: null; }

Por lo que parece ser que lo que no le gusta es el nombre. Una busqueda con algo de suerte en la documentación ...

Colors

...
A common issue users encounter with named colors is that since Sass prefers the same output format as was typed in other output modes, a color interpolated into a selector becomes invalid syntax when compressed. To avoid this, always quote named colors if they are meant to be used in the construction of a selector.

Ok. Vamos a probar haciéndolo caso:

$colors: (
  'darkTurquoise': #6bc9c4,
  lightTurquoise: #9bdad5,
);

$themeConfig: (
  linkColor: map-get($colors, "darkTurquoise"),
  linkColorBg: map-get($colors, "lightTurquoise")
);

a {
  color: map-get($themeConfig, "linkColor");
  background: map-get($themeConfig, "linkColorBg");
  text-decoration: none;
}

a {
color: #6bc9c4;
background: #9bdad5;
text-decoration: none;
}

Listo, problema resuelto :-)

1
  • 1
    Genial. Muchas gracias. Commented el 20 abr. 2019 a las 6:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.