O Sass é um pré-processador usado para melhorar sua produtividade ao codificar CSS. Dentre as várias funcionalidades, existe uma chamada maps.
O maps é como um array de variáveis. Ela guarda uma série de chaves com valores. A sintaxe é bastante comum, veja:
A primeira vista se parece com Json, né?
A ideia é que você consiga pegar o valor de qualquer chave que está dentro do seu mapa e usar em momentos onde você irá repetir bastante código.
Demo
No exemplo abaixo, vou mostrar uma situação muito comum ao desenvolvermos um site com variação de temas de cores. Na maneira normal, você faria um código basicamente assim:
Usando o mapa do SASS, a primeira coisa que faríamos seria separar as cores em variáveis, assim:
E faríamos uma função dessa forma:
O $tema seria cada uma das chaves, no nosso caso azul, vermelho e amarelo. O $cor seria cada um dos valores dos temas, ou seja, os valores hexadecimais. A função @each está dizendo assim: a cada valor dos temas (azul, vermelho, amarelo) que encontrar no mapa $cores, repita o bloco de código.
Isso resultaria no seguinte código:
Isso salva vidas. Agora vamos complicar mais. Normalmente um tema é composto de mais cores. Para isso o mapa vai ficar parecido isso:
O código do @each não mudará muito, mas precisaremos guardar cada uma dessas cores dentro de uma variável que será usada no código final. Ficará assim:
Explicando: a cada $tema (azul, vermelho e amarelo) que há no mapa $cores, ele vai gravar as variáveis $color1, $color2 e $color3. A função map-get vai pegar o valor específico de cada variável color1, color2 e color3 de cada tema e irá guardar. O código CSS fica assim:
Ele vai repetir o bloco acima uma vez para cada tema de cor. No nosso caso, 3 vezes: uma para azul, vermelho e amarelo.
Novamente: isso salva vidas.
A única coisa que você vai gerenciar depois são as variáveis para modificar ou inserir novas cores.
Veja abaixo um exemplo mais completo, mostrando o código final do CSS gerado:
O pessoal do Viget explorou outro problema para resolver. Na verdade, as implicações são diversas. A qualquer momento que você tiver um bloco de código repetitivo e que depende de muitas variações, o maps é indicado.
