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.

SCSSCSS
$colores: (
   color1: #0664cd, 
   color2: #eaeaea, 
   color3: #3e3e3e
);

// Aplicación
body  { 
   background : map-get($colores, color1 );
};
body {
  background: #0664cd;
}

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:

SCSSCSS
$estilos: (
    'font-family': 'Lato',
    'font-size': 1.5em,
    'color': black,
    'background': white
);

// Aplicación
h1 {
    color: map-get($estilos, 'color');
    background: map-get($estilos, 'background');
}
h1 {
  color: black;
  background: white;
}

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.

SCSSCSS
$breakpoints: (
   "phone":        480px,
   "phablet":      560px,
   "tablet-small": 640px,
   "tablet":       768px,
   "tablet-wide":  1024px,
   "desktop":      1200px,
);
@mixin mq($width, $type: min) {
   @if map_has_key($breakpoints, $width) {
      $width: map_get($breakpoints, $width);
      @if $type == max {
         $width: $width - 1px;
      }
      @media only screen and (#{$type}-width: $width) {
         @content;
      }
   }
}

// Como utilizarlo
body {

   @include mq('phablet') {
      background: red;
   }
   @include mq('tablet-wide') {
      background: tomato;
   }
}
@media only screen and (min-width: 560px) {
   body {
      background: red;
   }
}
@media only screen and (min-width: 1024px) {
   body {
      background: tomato;
   }
}

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: