53

Sass Maps my Precious

Embed Size (px)

Citation preview

Page 1: Sass Maps my Precious
Page 2: Sass Maps my Precious

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

@akfzambranahttp://andreazambrana.com.br

Page 3: Sass Maps my Precious

Vamos ao que interessa?

Page 4: Sass Maps my Precious

Sass mapsO que é isso?

Page 5: Sass Maps my Precious

Vetores associativosBasicamente =P

Page 6: Sass Maps my Precious

$mapa: (

chave: valor,

outra-chave: outro-valor

);

Page 7: Sass Maps my Precious

ChaveQualquer coisaÚnica

Page 8: Sass Maps my Precious

ValorQualquer coisa

Page 9: Sass Maps my Precious

Lista superpoderosa

Page 10: Sass Maps my Precious

O que precisa saber...

Page 11: Sass Maps my Precious

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

Page 12: Sass Maps my Precious

Pode ter vírgula no fimNão estressa

Page 13: Sass Maps my Precious

Chaves únicasSó pra fixar =P

Page 14: Sass Maps my Precious

Qualquer tipo de dadoAceito pelo Sass, claro

Page 15: Sass Maps my Precious

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

Page 16: Sass Maps my Precious

NullListas Mapas

Page 17: Sass Maps my Precious

Legal, ne?

Page 18: Sass Maps my Precious

ExemplosÚteis

Page 19: Sass Maps my Precious

Paleta de cores*___*

Page 20: Sass Maps my Precious

$base-color-grey: #666;

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

Page 21: Sass Maps my Precious

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

Page 22: Sass Maps my Precious

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

@return map-get(

map-get($palette, $color),

$tone

);

}

Page 23: Sass Maps my Precious

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

Page 24: Sass Maps my Precious

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

Page 25: Sass Maps my Precious

Media querie, vem ni mimBreakpoints

Page 26: Sass Maps my Precious

$screen-size: (

small: 767px,

medium: 992px,

large: 1200px

);

Page 27: Sass Maps my Precious

@mixin respond-to($size) {

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

$size)}) {

@content;

}

}

Page 28: Sass Maps my Precious

.my-link {

color: black;

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

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

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

}

Page 29: Sass Maps my Precious

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

}

Page 30: Sass Maps my Precious

use com moderaçãoz-index

Page 31: Sass Maps my Precious

$z-layers: (

hell-pit: -9999,

default: 1,

component: 50,

overlay: 4000,

modal: 4001

);

Page 32: Sass Maps my Precious

@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;

}

Page 33: Sass Maps my Precious

.dropdown {

z-index: layer(component);

}

.content {

z-index: layer(default);

}

.dialog-box {

z-index: layer(modal);

}

Page 34: Sass Maps my Precious

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

Page 35: Sass Maps my Precious

$icons: (

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

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

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

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

);

Page 36: Sass Maps my Precious

@each $social, $icon in $icons {

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

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

&:before {

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

}

}

}

Page 37: Sass Maps my Precious

Yes, we canControle de snippets

Page 38: Sass Maps my Precious

Hack clearfixquem nunca?

Page 39: Sass Maps my Precious

IE 6 e 7

%clearfix {

&:before,

&:after {

content: '';

display: table;

}

&:after {

clear: both;

}

& {

zoom: 1;

}

}

Page 40: Sass Maps my Precious

IE 8+

%clearfix {

&:after {

content: '';

display: table;

clear: both;

}

}

Page 41: Sass Maps my Precious

$browser-min: (

'chrome': 33,

'firefox': 26,

'ie': 8,

'safari': 5,

'opera': 10

);

Page 42: Sass Maps my Precious

%clearfix {

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

@if $min-support < 8 {

… } @else {

… }

}

Page 43: Sass Maps my Precious

e ser feliz!

Agora, é só soltara imaginação

Page 44: Sass Maps my Precious

Concluindo

Page 45: Sass Maps my Precious

Maps são poderosose muito úteis

Page 46: Sass Maps my Precious

Código mais estruturado

Page 47: Sass Maps my Precious

Melhor organização

Page 48: Sass Maps my Precious

Fácil manutenção

Page 49: Sass Maps my Precious

Menos código repetido

Page 50: Sass Maps my Precious

Menor tempode desenvolvimento

Page 51: Sass Maps my Precious

Cuidado com mapas dentro de mapasCuidado com mapas dentro de mapas

Page 53: Sass Maps my Precious

Obrigada!Front in Rio 2015 @akfzambrana