O que não te contaram sobre pré-processadores
-
Upload
eduardo-matos -
Category
Software
-
view
221 -
download
2
Transcript of O que não te contaram sobre pré-processadores
![Page 1: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/1.jpg)
O QUE NÃO TE CONTARAM SOBRE
PRÉ-PROCESSADORES
![Page 3: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/3.jpg)
Soluções de comunicação que aproximam médicos e pacientes
![Page 4: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/4.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/5.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/6.jpg)
A MAIORIA DE NÓS JÁ USA EM
PRATICAMENTE TODOS OS PROJETOS
![Page 7: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/7.jpg)
![Page 8: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/8.jpg)
EXISTEM MUITOS FRAMEWORKS
![Page 9: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/9.jpg)
TODOS ❤ PRÉ-PROCESSADORES
![Page 10: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/10.jpg)
![Page 11: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/11.jpg)
MAS E AÍ? O QUE ESTÃO ME ESCONDENDO?
![Page 12: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/12.jpg)
TOOLING
![Page 13: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/13.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/14.jpg)
sass style.scss
OSXgem install sass
/ Linux (Ubuntu)
![Page 15: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/15.jpg)
![Page 16: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/16.jpg)
OK, EU SOU DEV!
![Page 17: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/17.jpg)
MAS E OS OUTROS DO TIME?
![Page 18: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/18.jpg)
http://csspre.com/compile/
![Page 19: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/19.jpg)
CSS OUTPUT
![Page 20: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/20.jpg)
.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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/21.jpg)
.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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/22.jpg)
![Page 23: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/23.jpg)
@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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/24.jpg)
![Page 25: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/25.jpg)
@import "compass";
.btn {
@include opacity(.5);
}
![Page 26: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/26.jpg)
ABRA O OLHO PRO OUTPUT!
![Page 27: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/27.jpg)
ABSTRAÇÃO EXCESSIVA
![Page 28: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/28.jpg)
![Page 29: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/29.jpg)
![Page 30: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/30.jpg)
COMPILATION TIME
![Page 31: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/31.jpg)
3 min de compilação
![Page 32: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/32.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/33.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/34.jpg)
http://alistapart.com/article/a-vision-for-our-sass
![Page 36: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/36.jpg)
OMG DEVO PARAR DE USAR ENTÃO?
![Page 37: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/37.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/38.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/39.jpg)
NÃO CULPE LINGUAGEM OU FERRAMENTAS!
NÃO SEJA XIITA!
![Page 40: O que não te contaram sobre pré-processadores](https://reader033.fdocument.pub/reader033/viewer/2022052606/589b456e1a28ab4a398b4919/html5/thumbnails/40.jpg)
[email protected] [email protected]
@eduardojmatos
http://eduardomatos.me
OBRIGADO ;)
bit.ly/sobre-pre-processadores