Lightning talk apresentada no Front In Rio 2015 apresentando a feature Maps do Sass com alguns exemplos práticos e algumas vantagens no seu uso.

2. Quem sou eu?
Andréa Zambrana
front-end @ Amil [multicanais]
@akfzambrana
http://andreazambrana.com.br

3. Vamos ao que interessa?

4. Sass maps
O que é isso?

5. Vetores associativos
Basicamente =P

6. $mapa: (
chave: valor,
outra-chave: outro-valor
);

7. Chave
Qualquer coisa
Única

8. Valor
Qualquer coisa

9. Lista superpoderosa

10. O que precisa saber...

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

12. Pode ter vírgula no fim
Não estressa

13. Chaves únicas
Só pra fixar =P

14. Qualquer tipo de dado
Aceito pelo Sass, claro

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

16. Null
Listas
Mapas

17. Legal, ne?

18. Exemplos
Úteis

19. Paleta de cores
*___*

20. $base-color-grey: #666;
$base-color-red: rgb(255, 0, 0);

21. $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%)
)
);

22. @function get-color($color, $tone: 'base') {
@return map-get(
map-get($palette, $color),
$tone
);
}

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

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

25. Media querie, vem ni mim
Breakpoints

26. $screen-size: (
small: 767px,
medium: 992px,
large: 1200px
);

27. @mixin respond-to($size) {
@media (min-width: #{map-get($screen-size,
$size)}) {
@content;
}
}

28. .my-link {
color: black;
@include respond-to(small) { color: tomato; }
@include respond-to(medium) { color: blue; }
@include respond-to(large) { color: orange; }
}

29. .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; }
}

30. use com moderação
z-index

31. $z-layers: (
hell-pit: -9999,
default: 1,
component: 50,
overlay: 4000,
modal: 4001
);

32. @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;
}

33. .dropdown {
z-index: layer(component);
}
.content {
z-index: layer(default);
}
.dialog-box {
z-index: layer(modal);
}

34. Social media icons
ctrl + c, ctrl + v... nunca mais!

35. $icons: (
twitter: (char: "f099", color: #55acee),
google: (char: "f0d5", color: #dd4b39),
facebook:(char: "f09a", color: #3b5998),
github: (char: "f09b", color: #231f20)
);

36. @each $social, $icon in $icons {
&[href*="#{$social}"] {
background-color: map-get($icon, color);
&:before {
content: map-get($icon, char);
}
}
}

37. Yes, we can
Controle de snippets

38. Hack clearfix
quem nunca?

39. IE 6 e 7
%clearfix {
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
& {
zoom: 1;
}
}

40. IE 8+
%clearfix {
&:after {
content: '';
display: table;
clear: both;
}
}

41. $browser-min: (
'chrome': 33,
'firefox': 26,
'ie': 8,
'safari': 5,
'opera': 10
);

42. %clearfix {
$min-support: map-get($browser-min, 'ie');
@if $min-support < 8 {
…
} @else {
…
}
}

43. e ser feliz!
Agora, é só soltar
a imaginação

44. Concluindo

45. Maps são poderosos
e muito úteis

46. Código mais estruturado

47. Melhor organização

48. Fácil manutenção

49. Menos código repetido

50. Menor tempo
de desenvolvimento

51. Cuidado com mapas
dentro de mapas
Cuidado com mapas
dentro de mapas

52. http://www.sitepoint.com/using-sass-maps/
https://pt.wikipedia.org/wiki/Vetor_associativo
http://pt.slideshare.net/loumontano/sassconf-maps
http://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-duplication
https://css-tricks.com/snippets/css/clear-fix/
http://andreazambrana.com.br/grande-clearfix/
Referências

53. Obrigada!
Front in Rio 2015 @akfzambrana