Page 2
WTF am I? Andréa Zambranafront-end @ Amil [multicanais]
@akfzambranahttp://andreazambrana.com.br
Page 3
Pré-processadoresO que são? O.o
Page 5
e para nós do front?
Page 6
[Haml, Jade, Slim, Twig, ...]
HTML
Page 7
JS[CoffeScript, LiveScript, TypeScript, ...]
Page 8
CSS[Less, Sass, Stylus, ...]
Page 9
Tá, mas pra que serve?
Page 10
Fazer mais com menos
Page 11
BEM, OOCSS, SMACSS, DRY
Melhor aplicação de metodologias
Page 12
OMFG *____*
Código escalável e reutilizável
Page 13
Melhor manutenção
Page 14
Pré-processadores CSSAgora sim =P
Page 16
http://lesscss.org/ http://sass-lang.com/
https://learnboost.github.io/stylus/
Page 17
[CSS-Crush, Myth, Rework, …]
E outros menos conhecidos
Page 18
Dica da titia
A melhor ferramenta ou tecnologia é aquela que atende melhor ao seu projeto
Page 19
Syntactically Awesome Stylesheets
Sass
Page 20
@hcatlin
Hampton Catlin
Page 21
Natalie Weizenbaum@nex3
Page 22
Chris Eppstein@chriseppstein
Page 23
SintaxesSim, é no plural mesmo =P
Page 26
Sobre a instalaçãohttp://sass-lang.com/install
Page 27
Oh yeah! now we can play! =D
Arquivos _partial
Page 29
vem ni mim! *__*
@import
Page 30
Estrutura de arquivosArchitecture for a Sass Project do Hugo GiraudelHow to structure a Sass project do John W. Long
Page 31
Now, cut to the chase!
Page 33
NúmerosIncluindo suas unidades (em, px, rem, pt, etc)
Page 34
utilizando aspas ou não, simples ou duplas
Strings
Page 35
Hexadecimal, nome, rgb, rgba, etc
Cores
Page 36
true / false
Booleanos
Page 37
$nome: valor;
Sintaxe
Page 38
O bom, o mau e o feioNem tudo é branco e preto
Page 39
Manutenção< esforço> velocidade
Page 40
Desenvolvimento> velocidade< esforço para lembrar> padronização
Page 41
Customização> possibilidades> esforço< velocidade
Page 42
Show me the code!!!
Page 44
Nesting
Aninhamento
Page 46
Questão de paternindadeWho is your daddy?!
Page 47
.pai {.filho { … }
.irmao {.neto { … }
}}
Sintaxe
Page 48
O bom, o mau e o muito feioTenha cuidado pequeno gafanhoto O.o
Page 49
Manutenção< esforço > leitura
Page 50
Desenvolvimento< esforço> organização> velocidade
Page 54
Um pouco de código
Page 56
Não está tão ruimMas pode melhorar
Page 58
Boa práticaO próximo front pode ser um serial killer =P
Page 59
Se tiver “bisnetos”, seu código ta ficando podre ¬¬’
Dois é bom, três é demais
Page 60
Seu lindo *___*
Mixin
Page 61
@mixin nome(argumento) {propriedades, regras, etc
}
Sintaxe
Page 62
E como usa?Quero ver código!
Page 64
O bom, o mau e o feioNem tudo é cor de rosa
Page 65
> velocidade> organização> reciclagem / reutilização> padronização
Desenvolvimento
Page 66
< performance> esforço
Desenvolvimento
Page 67
> facilidade> velocidade> danos colaterais
Manutenção
Page 68
with power comes great responsibility...
Boa prática
Page 69
Então não é mixin
Se não recebe argumentos
Page 70
Herança de seletores@extend
Page 71
Concatenação, use com moderação =]
Classes
Page 72
@extend .nome-classe;
Sintaxe
Page 75
Place... what?
Placeholder selector
Page 76
Imagina que é uma classe
Page 77
%nome-do-placeholder {propriedades, regras, etc
}
Sintaxe
Page 78
Mas, pra que preciso de uma classe que “não é uma classe”?
Entendi...
Page 81
E como funciona?Bora pro código!
Page 83
O bom, o bomzão e o difícilQue a força esteja conosco!
Page 84
> velocidade< esforço> padronização
Desenvolvimento
Page 85
> componentização> uso de qualquer metodologia CSS> efeitos colaterais
Desenvolvimento
Page 86
> prático> fácil< e > esforço
Manutenção
Page 87
> leitura> organização
Manutenção
Page 88
Sim e não =/
OMG so tem coisa boa!
Page 89
Literalmente, separa um lugar...!important venha cá, que vou lhe usar
Page 91
This is a real problem :(
Media querie
Page 95
+ -*/
%
Matemáticos
Page 98
andor
notBooleanos
Page 99
Yeah baby!! \m/
Estruturas de controle
Page 101
@if condição {…
} @else if condição {…
} @else {…
}
Sintaxe
Page 103
@for variável from inicio through fim {propriedades, regras, etc
}
Sintaxe
Page 105
@each variavel in lista/mapa {propriedades, regras, etc
}
Sintaxe
Page 107
Sintaxe@while condição {
propriedades, regras, etc.}
Page 108
Really? *.*
Funções
Page 109
São muitas e muito legais =Dhttp://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions
Nativas
Page 110
Agora o “bagulho fica loko”
Customizadas
Page 111
Só que bombados
São como mixins
Page 113
@function nome(argumento){propriedades, regras, etc
@return valor;}
Sintaxe
Page 114
Não tem coisa ruim, serio!
O bom, o bomzão e o melhor
Page 115
> velocidade> dinámico> lógica complexa
Desenvolvimento
Page 117
O céu é o limiteSeja feliz!
Page 119
chave: valorÉ uma lista super-poderosa
Page 120
$map: (chave: valor,outra-chave: valor
);
Sintaxe
Page 121
Legal ne?só que essa é outra talk ;P
Page 122
Para estudo
The Sass way - Blog
http://thesassway.com/
Hugo Giraudel - Blog
http://hugogiraudel.com/blog/
Curso de Loiane Groner - Canal Youtube
https://www.youtube.com/playlist?list=PL3C05B7A66AC502CF
Page 123
Referências
http://sass-lang.com/
http://alexplaza.co/scss/sass/preprocessors/2014/07/05/Porque-usar-un-preprocesador-de-css/
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
https://es.wikipedia.org/wiki/Sass_(lenguaje_de_hojas_de_estilo)
http://www.sitepoint.com/architecture-sass-project/
http://cssguidelin.es/
http://slides.com/ridjohansen/gdb-2013_css-reciclavel-com-o-uso-de-metodologias#/
http://pt.slideshare.net/loumontano/sass-conferencia-csssp
Page 124
Obrigada!FEMUG ABC #5@akfzambrana | http://andreazambrana.com.br