{ . . . }

Aprende a Usar los Sass Maps

Los Sass Maps son estructura de datos que utiliza el preprocesador para almacenar valores, estos aparecieron en la versión 3.3 de Sass y desde entonces se han convertido en pieza importante para el core de este lenguaje.

Sintaxis basica:

$map: (key1: value1, key2: value2, key3: value3);

Los maps estarán bajo un nombre de variable y dentro de paréntesis (), asociados key/value “claves y valores”, donde utilizaremos la clave para buscar y acceder a dicho valor asociado y para devolver el valor especifico de alguna clave especificada utilizamos  map-get.

Las claves de los maps deben de ser únicas en cada map y podemos utilizar tanto en claves como valores cualquier tipo de dato permitido por SassScript.

Map functions: map functions

Estos mapas son ideales para la configuración y estructuración de proyectos por parte de Sass, para tener fuentes referenciadas y poder manipularlos fácilmente y su uso pasa por todos los niveles, desde lo básicos hasta  funciones avanzadas y complejas. Veamos algunos ejemplos:

Gestión Básica con Sass Map

Vamos a crear un mapa donde vamos a gestionar colores de redes sociales, lo primero es definir nuestro mapa de colores, definimos una variable para el mapa $colores, y dentro las claves con sus respectivos valores.

$colores: (
   facebook: #3b5998,
   googleplus: #dd4b39,
   instagram: #517fa4,
   linkedin: #007bb6,
   pinterest: #cb2027,
   twitter: #00aced,
   youtube: #b00,
   soundcloud: #f60,
);
Ahora, algo que hay que tener en cuenta es que Sass nos va a permitir gestionar estos mapas con sus funciones establecidas. En este caso vamos a utilizar la directiva @each para gestionar el mapa $colores y asignar a los elementos HTML sus respectivos colores.
@each $colores, $bgcolor in $colores {
   .social--#{$colores} {
       background: $bgcolor;
   }
}
Resultado:

See the Pen Sass Maps, Colores by frontend (@tutosytips) on CodePen
20550

Claves/Valores Anidados

En los Sass Maps podemos anidar y organizar grupos de acuerdo al tipo de información que queremos  gestionar, por ejemplo, gestionar colores con tonos y matices u cualquier variación del mismo en el mismo grupo bajo el mismo nombre. Veamos un ejemplo:

$iconos: (
   twitter: (
       ico: "\f099", 
       color: #55acee
   ),
   google: (
       ico: "\f0d5", 
       color: #dd4b39
   ),
   facebook: (
       ico: "\f09a", 
       color: #3b5998
   ),
   github: (
       ico: "\f09b", 
       color: #231f20
   ),
   linkedin: (
       ico: "\f0e1", 
       color: #0977b5)
);
Donde los valores y sus nombres son agrupados entre parentesis () y separados por coma “,”. Veamos el ejemplo anterior y como se aplicaría.

See the Pen Sass map #2 by frontend (@tutosytips) on CodePen
20550

O veamos otro ejemplo donde utilizamos varios tipos de datos permitidos en SassScript:

Media Queries con los Sass Maps

Sabemos lo que son los Media Quieries o “Consulta de Medios” de CSS3, nos permite establecer reglas de estilos dependiendo en donde sea visualizado el sitio web, aunque esto es muy bueno, sabemos que es un poco tedioso establecerlos en la hoja de estilos. Bueno Sass nos ayuda con estos, vamos a ver cómo gestionar en una forma básica y rápida las diferentes consultas por medio de los Sass Maps.

Ver ejemplo en codepen Fácil cierto 🙂

Ahora, creo que están claras las ventajas al utilizar los Sass Maps, pienso que la mayor es la organización de nuestro código, esto habla muy bien de nosotros, da buenas referencias y nos aliviará la vida al momento de escribir CSS por medio de Sass.

Más información: 

Comentar

avatar
Ordenar:   Nuevos | Antiguos | Más votados
LotarMC

Hoola, que te a pasado que no subes articulos ni nuevos curso. son realmente buenos me gustaria que siguieras con esto lo haces muy bien, haz sido un gran aporte en mi aprendisaje de front end,, Espero que continúes, saludos

wpDiscuz