Sass Maps my Precious

Quem sou eu?Andréa Zambranafront-end @ Amil [multicanais]

@akfzambranahttp://andreazambrana.com.br

Vamos ao que interessa?

Sass mapsO que é isso?

Vetores associativosBasicamente =P

$mapa: (

chave: valor,

outra-chave: outro-valor

);

ChaveQualquer coisaÚnica

ValorQualquer coisa

Lista superpoderosa

O que precisa saber...

Funções nativashttp://sass-lang.com/documentation/Sass/Script/Functions.html#map-functions

Pode ter vírgula no fimNão estressa

Chaves únicasSó pra fixar =P

Qualquer tipo de dadoAceito pelo Sass, claro

Números Strings, com ou sem aspas Cores Valores booleanos

NullListas Mapas

Legal, ne?

ExemplosÚteis

Paleta de cores*___*

$base-color-grey: #666;

$base-color-red: rgb(255, 0, 0);

$palette: ( red: ( base: $base-color-red, light: lighten($base-color-red, 20%), dark: darken($base-color-red, 20%) ), grey: ( base: $base-color-grey, light: lighten($base-color-grey, 20%), dark: darken($base-color-grey, 20%) ));

@function get-color($color, $tone: 'base') {

@return map-get(

map-get($palette, $color),

$tone

);

}

.primary-link { color: get-color(red); &:hover { color: get-color(red, light); }}.secondary-link { color: get-color(grey); &:hover { color: get-color(grey, dark); }}

.primary-link { color: red;}.primary-link:hover { color: #ff6666;}.secondary-link { color: #666;}.secondary-link:hover { color: #333333;}

Media querie, vem ni mimBreakpoints

$screen-size: (

small: 767px,

medium: 992px,

large: 1200px

);

@mixin respond-to($size) {

@media (min-width: #{map-get($screen-size,

$size)}) {

@content;

}

}

.my-link {

color: black;

@include respond-to(small) { color: tomato; }

@include respond-to(medium) { color: blue; }

@include respond-to(large) { color: orange; }

}

.my-link {

color: black;

}

@media (min-width: 767px) {

.my-link { color: tomato; }

}

@media (min-width: 992px) {

.my-link { color: blue; }

}

@media (min-width: 1200px) {

.my-link { color: orange; }

}

use com moderaçãoz-index

$z-layers: (

hell-pit: -9999,

default: 1,

component: 50,

overlay: 4000,

modal: 4001

);

@function layer($key) {

@if map-has-key($z-layers, $key) {

@return map-get($z-layers, $key);

} @else {

@warn "Unknown `#{$key}` in $z-layers.";

}

@return null;

}

.dropdown {

z-index: layer(component);

}

.content {

z-index: layer(default);

}

.dialog-box {

z-index: layer(modal);

}

Social media iconsctrl + c, ctrl + v... nunca mais!

$icons: (

twitter: (char: "\f099", color: #55acee),

google: (char: "\f0d5", color: #dd4b39),

facebook:(char: "\f09a", color: #3b5998),

github: (char: "\f09b", color: #231f20)

);

@each $social, $icon in $icons {

&[href*="#{$social}"] {

background-color: map-get($icon, color);

&:before {

content: map-get($icon, char);

}

}

}

Yes, we canControle de snippets

Hack clearfixquem nunca?

IE 6 e 7

%clearfix {

&:before,

&:after {

content: '';

display: table;

}

&:after {

clear: both;

}

& {

zoom: 1;

}

}

IE 8+

%clearfix {

&:after {

content: '';

display: table;

clear: both;

}

}

$browser-min: (

'chrome': 33,

'firefox': 26,

'ie': 8,

'safari': 5,

'opera': 10

);

%clearfix {

$min-support: map-get($browser-min, 'ie');

@if $min-support < 8 {

… } @else {

… }

}

e ser feliz!

Agora, é só soltara imaginação

Concluindo

Maps são poderosose muito úteis

Código mais estruturado

Melhor organização

Fácil manutenção

Menos código repetido

Menor tempode desenvolvimento

Cuidado com mapas dentro de mapasCuidado com mapas dentro de mapas

http://www.sitepoint.com/using-sass-maps/https://pt.wikipedia.org/wiki/Vetor_associativohttp://pt.slideshare.net/loumontano/sassconf-mapshttp://erskinedesign.com/blog/friendlier-colour-names-sass-maps/http://www.sitepoint.com/managing-responsive-breakpoints-sass/https://css-tricks.com/handling-z-index/https://robots.thoughtbot.com/removing-sass-duplicationhttps://css-tricks.com/snippets/css/clear-fix/http://andreazambrana.com.br/grande-clearfix/

Referências

Obrigada!Front in Rio 2015 @akfzambrana