Sass, css bomda[do]

WTF am I? Andréa Zambrana
front-end @ Amil [multicanais]
@akfzambrana
http://andreazambrana.com.br

Pré-processadores
O que são? O.o

[Haml, Jade, Slim, Twig, ...]
HTML

JS
[CoffeScript, LiveScript, TypeScript, ...]

BEM, OOCSS, SMACSS, DRY
Melhor aplicação de
metodologias

OMFG *____*
Código escalável e
reutilizável

Pré-processadores CSS
Agora 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

Sintaxes
Sim, é no plural mesmo =P

Sobre a instalação
http://sass-lang.com/install

Oh yeah! now we can play! =D
Arquivos _partial

Estrutura de arquivos
Architecture for a Sass Project do Hugo Giraudel
How to structure a Sass project do John W. Long

Números
Incluindo suas unidades (em, px, rem, pt, etc)

utilizando aspas ou não, simples ou duplas
Strings

Hexadecimal, nome, rgb, rgba, etc
Cores

O bom, o mau e o feio
Nem tudo é branco e preto

Manutenção
< esforço
> velocidade

Desenvolvimento
> velocidade
< esforço para lembrar
> padronização

Customização
> possibilidades
> esforço
< velocidade

Questão de paternindade
Who is your daddy?!

.pai {
.filho { … }
.irmao {
.neto { … }
}
}
Sintaxe

O bom, o mau e o muito feio
Tenha cuidado pequeno gafanhoto O.o

Manutenção
< esforço
> leitura

Desenvolvimento
< esforço
> organização
> velocidade

Não está tão ruim
Mas pode melhorar

Boa prática
O próximo front pode ser um serial killer =P

Se tiver “bisnetos”, seu código ta ficando podre ¬¬’
Dois é bom, três é demais

@mixin nome(argumento) {
propriedades, regras, etc
}
Sintaxe

E como usa?
Quero ver código!

O bom, o mau e o feio
Nem 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

Concatenação, use com moderação =]
Classes

Place... what?
Placeholder selector

%nome-do-placeholder {
}
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ícil
Que 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

Yeah baby!! m/
Estruturas de controle

@if condição {
…
} @else if condição {
…
} @else {
…
}
Sintaxe

@for variável from inicio through fim {
}
Sintaxe

@each variavel in lista/mapa {
}
Sintaxe

Sintaxe
@while condição {
propriedades, regras, etc.
}

São muitas e muito legais =D
http://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){
@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 limite
Seja 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

Sass, css bomda[do]

Mais conteúdo relacionado

Destaque (11)

Semelhante a Sass, css bomda[do] (20)

Último (16)

Sass, css bomda[do]