sass maps, my precious!
TRANSCRIPT
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