40
O QUE NÃO TE CONTARAM SOBRE PRÉ-PROCESSADORES

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

Embed Size (px)

Citation preview

Page 1: O que não te contaram sobre pré-processadores

O QUE NÃO TE CONTARAM SOBRE

PRÉ-PROCESSADORES

Page 2: O que não te contaram sobre pré-processadores

@eduardojmatos eduardomatos.me

OI, EU SOU O EDU

Page 3: O que não te contaram sobre pré-processadores

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

Page 4: O que não te contaram sobre pré-processadores

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

Page 5: O que não te contaram sobre pré-processadores

PRÉ-PROCESSADORES SÃO LEGAIS

• tem variáveis;

• tem mixins;

• tem operações;

• tem nested properties;

• tem functions;

• tem expressões;

Page 6: O que não te contaram sobre pré-processadores

A MAIORIA DE NÓS JÁ USA EM

PRATICAMENTE TODOS OS PROJETOS

Page 7: O que não te contaram sobre pré-processadores
Page 8: O que não te contaram sobre pré-processadores

EXISTEM MUITOS FRAMEWORKS

Page 9: O que não te contaram sobre pré-processadores

TODOS ❤ PRÉ-PROCESSADORES

Page 10: O que não te contaram sobre pré-processadores
Page 11: O que não te contaram sobre pré-processadores

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

Page 12: O que não te contaram sobre pré-processadores

TOOLING

Page 13: O que não te contaram sobre pré-processadores

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)

Page 14: O que não te contaram sobre pré-processadores

sass style.scss

OSXgem install sass

/ Linux (Ubuntu)

Page 15: O que não te contaram sobre pré-processadores
Page 16: O que não te contaram sobre pré-processadores

OK, EU SOU DEV!

Page 17: O que não te contaram sobre pré-processadores

MAS E OS OUTROS DO TIME?

Page 18: O que não te contaram sobre pré-processadores

http://csspre.com/compile/

Page 19: O que não te contaram sobre pré-processadores

CSS OUTPUT

Page 20: O que não te contaram sobre pré-processadores

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

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

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

Page 21: O que não te contaram sobre pré-processadores

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

.box2 { padding: 10px; }

Page 22: O que não te contaram sobre pré-processadores
Page 23: O que não te contaram sobre pré-processadores

@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);

Page 24: O que não te contaram sobre pré-processadores
Page 25: O que não te contaram sobre pré-processadores

@import "compass";

.btn {

@include opacity(.5);

}

Page 26: O que não te contaram sobre pré-processadores

ABRA O OLHO PRO OUTPUT!

Page 27: O que não te contaram sobre pré-processadores

ABSTRAÇÃO EXCESSIVA

Page 28: O que não te contaram sobre pré-processadores
Page 29: O que não te contaram sobre pré-processadores
Page 30: O que não te contaram sobre pré-processadores

COMPILATION TIME

Page 31: O que não te contaram sobre pré-processadores

3 min de compilação

Page 32: O que não te contaram sobre pré-processadores

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;

Page 33: O que não te contaram sobre pré-processadores

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;

Page 34: O que não te contaram sobre pré-processadores

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

Page 35: O que não te contaram sobre pré-processadores

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

Page 36: O que não te contaram sobre pré-processadores

OMG DEVO PARAR DE USAR ENTÃO?

Page 37: O que não te contaram sobre pré-processadores

NOPE!

A maioria dos problemas aconteceriam com CSS “vanilla”;

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

Page 38: O que não te contaram sobre pré-processadores

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

DISCUTA PADRÕES DE CÓDIGO

DISSEMINE CULTURA DE DESENVOLVIMENTO

Page 39: O que não te contaram sobre pré-processadores

NÃO CULPE LINGUAGEM OU FERRAMENTAS!

NÃO SEJA XIITA!