0

soy nuevo en SCSS y tengo esta variable de la gama de mi color principal Estoy trabajando en angular

$my-primary-color: (
    50 : #e0e7ed,
    100 : #b3c2d1,
    200 : #809ab3,
    300 : #4d7194,
    400 : #26527d,
    500 : #003466,
    600 : #002f5e,
    700 : #002753,
    800 : #002149,
    900 : #001538,
    A100 : #6e93ff,
    A200 : #3b6cff,
    A400 : #0846ff,
    A700 : #003bee,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #ffffff,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

Quiero obtener el valor de 500 Espero por favor me puedan ayudar

1 respuesta 1

2

Por lo que veo estás usando mapas, la verdad desconocía su uso, pero nada que una pequeña investigación no arregle. Tengo esta posible solución que te pueda servir:D

Solución 1

$my-primary-color: (
    50 : #e0e7ed,
    100 : #b3c2d1,
    200 : #809ab3,
    300 : #4d7194,
    400 : #26527d,
    500 : #003466,
    600 : #002f5e,
    700 : #002753,
    800 : #002149,
    900 : #001538,
    A100 : #6e93ff,
    A200 : #3b6cff,
    A400 : #0846ff,
    A700 : #003bee,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #ffffff,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);
.element {
    color: map-get($my-primary-color, 500);
}
<p class="element">Hola estoy probando los "maps" de Sass</p>

Con map-get obtienes el valor de tu map, en este caso $my-primary-color, el primer argumento lleva el map y el segundo la clave.

Solución 2

Si quieres acceder al 500 de contrast entonces podrías usar algo así:

.element {
    color: map-get($my-primary-color, contrast, 500);
}

Espero te ayude.

2
  • 1
    Te agradezco tanto de verdad Muchas gracias
    – KikeGP
    el 5 may. 2022 a las 14:56
  • @KikeGP Si te ha servido, podrías declararla como la mejor respuesta para que así a otras personas les pueda servir de la misma manera que a ti.
    – LB17
    el 5 may. 2022 a las 16:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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