32 / 68
POST
DO DIEGO
DEV WEB
32
Cargo:
Criador do
Tableless.com.br
e coordenador de
desenvolvimento de
produto da Locaweb
Contato:
diego@
tabeless.com.br
Twitter:
@diegoeis
DIEGO EIS
ntre as várias
funcionalidades do Sass,
há uma chamada Maps. O
Maps é como uma array de
variáveis. Ela guarda uma
série de chaves com valores.
A sintaxe é bastante comum, veja:
<pre class="lang-sass">$map: ( key1:
value1, key2: value2, key3: value3);</
pre>
À primeira vista se parece até com Json, né?
<h2>Aplicando</h2>
1R H[HPSOR DEDL[R YRX PRVWUDU
uma situação que é muito comum ao
desenvolvermos um site em que cada
página ou tema tem sua coleção de cores.
Na maneira normal, você faria um código
basicamente assim:
<pre class="lang-css">.tema-azul body
background-color: #0176bb;.tema-vermelho
body background-color: #e3413e;.tema-
amarelo body background-color: #f8e042;</
pre>
Ao usar o mapa do Sass, a primeira coisa
a fazer é separar as cores em variáveis,
deste modo:
<pre class="lang-sass">$cores: ( azul:
#0176bb, vermelho: #e3413e, amarelo:
#f8e042);</pre>
Então, usaríamos essas cores em uma
função, desta forma:
<pre class="lang-sass">@each $tema, $cor in
$cores .tema-#tema body background-
color: $cor; </pre>
2 WHPD VHULD FDGD XPD GDV FKDYHV 1HVWH
FDVR D]XO YHUPHOKR H DPDUHOR 2 FRU VHULD
cada um dos valores dos temas, ou seja, os
YDORUHV KH[DGHFLPDLV $ FDGD YDORU GH WHPDV
D]XO YHUPHOKR DPDUHOR TXH HQFRQWUDU QR
REMHWR FRUHV UHSLWD R EORFR GH FµGLJR DVVLP
<pre class="lang-css">.tema-azul body
background-color: #0176bb;.tema-vermelho
body background-color: #e3413e;.tema-
amarelo body background-color: #f8e042;</
pre>
O @each não mudará muito, mas é
preciso guardar cada uma dessas cores
dentro de uma variável que será usada no
código final. Ficará desta forma:
<pre class="lang-sass">@each $tema, $cor
in $cores $color1: map-get($cor, color1);
$color2: map-get($cor, color2);</pre>
$ H[SOLFD©¥R « TXH D FDGD WHPD D]XO
YHUPHOKR H DPDUHOR TXH K£ QR PDSD FRUHV HOH
YDL JUDYDU DV YDUL£YHLV FRORU H FRORU $ IXQ©¥R
map-get pega o valor na variável color1 de cada
tema e vai guardar. A mesma coisa acontece com
o color2 e color3. Acesse
KWWS OZJR WR [
para
YHU XP H[HPSOR PDLV FRPSOHWR
E
[
MAPS É COMO
UMA ARRAYDE
VARIÁVEIS. ELA
GUARDAUMA
SÉRIE DE CHAVES
COMVALORES
E TEMUMA
SINTAXE BASTANTE
COMUM
]
COMO USAR OS
MAPS DO SASS
LW
REVISTA LOCAWEB