WTF am I? Andréa Zambranafront-end @ Amil [multicanais]
@akfzambranahttp://andreazambrana.com.br
Pré-processadoresO que são? O.o
e para nós do front?
[Haml, Jade, Slim, Twig, ...]
HTML
JS[CoffeScript, LiveScript, TypeScript, ...]
CSS[Less, Sass, Stylus, ...]
Tá, mas pra que serve?
Fazer mais com menos
BEM, OOCSS, SMACSS, DRY
Melhor aplicação de metodologias
OMFG *____*
Código escalável e reutilizável
Melhor manutenção
Pré-processadores CSSAgora sim =P
http://lesscss.org/ http://sass-lang.com/
https://learnboost.github.io/stylus/
[CSS-Crush, Myth, Rework, …]
E outros menos conhecidos
Dica da titia
A melhor ferramenta ou tecnologia é aquela que atende melhor ao seu projeto
Syntactically Awesome Stylesheets
Sass
@hcatlin
Hampton Catlin
Natalie Weizenbaum@nex3
Chris Eppstein@chriseppstein
SintaxesSim, é no plural mesmo =P
Sobre a instalaçãohttp://sass-lang.com/install
Oh yeah! now we can play! =D
Arquivos _partial
vem ni mim! *__*
@import
Estrutura de arquivosArchitecture for a Sass Project do Hugo GiraudelHow to structure a Sass project do John W. Long
Now, cut to the chase!
NúmerosIncluindo suas unidades (em, px, rem, pt, etc)
utilizando aspas ou não, simples ou duplas
Strings
Hexadecimal, nome, rgb, rgba, etc
Cores
true / false
Booleanos
$nome: valor;
Sintaxe
O bom, o mau e o feioNem tudo é branco e preto
Manutenção< esforço> velocidade
Desenvolvimento> velocidade< esforço para lembrar> padronização
Customização> possibilidades> esforço< velocidade
Show me the code!!!
Nesting
Aninhamento
Questão de paternindadeWho is your daddy?!
.pai {.filho { … }
.irmao {.neto { … }
}}
Sintaxe
O bom, o mau e o muito feioTenha cuidado pequeno gafanhoto O.o
Manutenção< esforço > leitura
Desenvolvimento< esforço> organização> velocidade
Um pouco de código
Não está tão ruimMas pode melhorar
Boa práticaO próximo front pode ser um serial killer =P
Se tiver “bisnetos”, seu código ta ficando podre ¬¬’
Dois é bom, três é demais
Seu lindo *___*
Mixin
@mixin nome(argumento) {propriedades, regras, etc
}
Sintaxe
E como usa?Quero ver código!
O bom, o mau e o feioNem tudo é cor de rosa
> velocidade> organização> reciclagem / reutilização> padronização
Desenvolvimento
< performance> esforço
Desenvolvimento
> facilidade> velocidade> danos colaterais
Manutenção
with power comes great responsibility...
Boa prática
Então não é mixin
Se não recebe argumentos
Herança de seletores@extend
Concatenação, use com moderação =]
Classes
@extend .nome-classe;
Sintaxe
Place... what?
Placeholder selector
Imagina que é uma classe
%nome-do-placeholder {propriedades, regras, etc
}
Sintaxe
Mas, pra que preciso de uma classe que “não é uma classe”?
Entendi...
E como funciona?Bora pro código!
O bom, o bomzão e o difícilQue a força esteja conosco!
> velocidade< esforço> padronização
Desenvolvimento
> componentização> uso de qualquer metodologia CSS> efeitos colaterais
Desenvolvimento
> prático> fácil< e > esforço
Manutenção
> leitura> organização
Manutenção
Sim e não =/
OMG so tem coisa boa!
Literalmente, separa um lugar...!important venha cá, que vou lhe usar
This is a real problem :(
Media querie
+ -*/
%
Matemáticos
andor
notBooleanos
Yeah baby!! \m/
Estruturas de controle
@if condição {…
} @else if condição {…
} @else {…
}
Sintaxe
@for variável from inicio through fim {propriedades, regras, etc
}
Sintaxe
@each variavel in lista/mapa {propriedades, regras, etc
}
Sintaxe
Sintaxe@while condição {
propriedades, regras, etc.}
Really? *.*
Funções
São muitas e muito legais =Dhttp://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions
Nativas
Agora o “bagulho fica loko”
Customizadas
Só que bombados
São como mixins
@function nome(argumento){propriedades, regras, etc
@return valor;}
Sintaxe
Não tem coisa ruim, serio!
O bom, o bomzão e o melhor
> velocidade> dinámico> lógica complexa
Desenvolvimento
O céu é o limiteSeja feliz!
chave: valorÉ uma lista super-poderosa
$map: (chave: valor,outra-chave: valor
);
Sintaxe
Legal ne?só que essa é outra talk ;P
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
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
Obrigada!FEMUG ABC #5@akfzambrana | http://andreazambrana.com.br