o que não te contaram sobre pré-processadores

O QUE NÃO TE CONTARAM SOBRE

PRÉ-PROCESSADORES

@eduardojmatos eduardomatos.me

OI, EU SOU O EDU

Soluções de comunicação que aproximam médicos e pacientes

PRIMEIRAMENTE ESSA PALESTRA NÃO É

uma apologia sobre o uso ou não uso de pré-processadores

a única e absoluta opinião sobre pré-processadores

PRÉ-PROCESSADORES SÃO LEGAIS

• tem variáveis;

• tem mixins;

• tem operações;

• tem nested properties;

• tem functions;

• tem expressões;

A MAIORIA DE NÓS JÁ USA EM

PRATICAMENTE TODOS OS PROJETOS

EXISTEM MUITOS FRAMEWORKS

TODOS ❤ PRÉ-PROCESSADORES

MAS E AÍ? O QUE ESTÃO ME ESCONDENDO?

TOOLING

lessc styles.less styles.css npm install -g less

sudo apt-get install --yes nodejs

brew install node

OSXruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Linux (Ubuntu)

sass style.scss

OSXgem install sass

/ Linux (Ubuntu)

OK, EU SOU DEV!

MAS E OS OUTROS DO TIME?

http://csspre.com/compile/

CSS OUTPUT

.box { background: #eee; border: 1px solid #ccc;

.heading { font-size: 2em; } }

.box2 { @extend .box; padding: 10px; }

.box, .box2 { background: #eee; border: 1px solid #ccc; } .box .heading, .box2 .heading { font-size: 2em; }

.box2 { padding: 10px; }

@include rounded(false, 9px, false, 9px)

@include roundcorners((top-right, bottom-left), 9px);

@include linear-gradient(to right, magenta, red,

orange, yellow, green, blue, purple);

@import "compass";

.btn {

@include opacity(.5);

}

ABRA O OLHO PRO OUTPUT!

ABSTRAÇÃO EXCESSIVA

COMPILATION TIME

3 min de compilação

VERSIONAMENTO DO ARQUIVO COMPILADO

• sim?Precisa sempre garantir que, quando um outro developer alterar algo, precisa compilar (resolvemos isso com um `watch`);

• não? precisa ter uma rotina de build e adicionar a compilação nisso;

FALSA SENSAÇÃO DE ORGANIZAÇÃO

• Pré-processadores não fazem mágica estrutural;

• Sem um code standard e/ou um style guide as coisas tendem a ficar bagunçadas;

http://alistapart.com/article/a-vision-for-our-sass

HTTP://HOWTOCODE.COM.BR/CURSOS/CSS

OMG DEVO PARAR DE USAR ENTÃO?

NOPE!

A maioria dos problemas aconteceriam com CSS “vanilla”;

Pré-processadores só potencializam algumas más práticas;

DEFINA COM SUA EQUIPE ALGUMAS REGRINHAS DE “CONVIVÊNCIA" DO CSS

DISCUTA PADRÕES DE CÓDIGO

DISSEMINE CULTURA DE DESENVOLVIMENTO

NÃO CULPE LINGUAGEM OU FERRAMENTAS!

NÃO SEJA XIITA!

eduardo.matos@medicinia.com.br eduardoj.matos@gmail.com

@eduardojmatos

http://eduardomatos.me

OBRIGADO ;)

bit.ly/sobre-pre-processadores