CSS bomba[do]

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

.sass

.scss

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!

VariávelVariable

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!!!

cssscss

Nesting

Aninhamento

Boring...

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

cuidado!cuidado!

Um pouco de código

scss css

Não está tão ruimMas pode melhorar

cssscss

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!

cssscss

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

Exemplo?

scss css

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

Não é compilado

Separa um lugar

E como funciona?Bora pro código!

scss css

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

scss css

This is a real problem :(

Media querie

scss console

cssscss

Operadores

+ -*/

%

Matemáticos

scss css

cssscss

andor

notBooleanos

Yeah baby!! \m/

Estruturas de controle

@if

@if condição {…

} @else if condição {…

} @else {…

}

Sintaxe

@for

@for variável from inicio through fim {propriedades, regras, etc

}

Sintaxe

@each

@each variavel in lista/mapa {propriedades, regras, etc

}

Sintaxe

@while

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

@return

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

Maps

Mapas

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