Slide 1
Slide 1 text
Por que usar pré-
processadores CSS?
Rômulo Machado
SCTI-UENF/2014
http://fc04.deviantart.net/fs71/f/2012/232/1/8/minimalist_wallpaper__why_not_zoidberg__by_krukmeister-
d5bsep6.jpg
Slide 2
Slide 2 text
romulomachado_
romulomachado
romulo.machado5
front-end e rails developer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Agenda
• Abstração
• Como pré-processadores nos ajudam
• Convencendo o time
• Mudando pro Sass
• "Isso não é para mim porque…"
Slide 5
Slide 5 text
ABSTRAÇÃO
Slide 6
Slide 6 text
Live coding, vou criar um
site aqui, pera…
Slide 7
Slide 7 text
10101010101010101010101
010101010101011111010011010101010
101010101010100010101011101010101
010101001001001000100001010101110
101010101010101010101010101010101
011101010101011010101010101010101
010111010101010101010101010101111
010101010101010101010101010111010
101011011110001010100000000001010
101000010101000101110101010101010
101010101110101010101010101010110
1010111000
Slide 8
Slide 8 text
http://www.joaopessoa.pb.gov.br/portal/wp-content/uploads/2013/04/mallandro-2.jpg
Slide 9
Slide 9 text
101010
0
1
0
0
1
1
*
*
*
*
*
*
1
2
4
8
16
32
=
=
=
=
=
=
0
0
0
32
2
8
42
Slide 10
Slide 10 text
1000001
A
Slide 11
Slide 11 text
1000010
B
Slide 12
Slide 12 text
Assembler
Instruções
em texto
01010111010100101010
10101010110101010101
01010101010101010101
01010101010100001101
00110111010101010111
01001010000001001010
10101010110101110101
Slide 13
Slide 13 text
Compilador
Instruções
em texto
01010111010100101010
10101010110101010101
01010101010101010101
01010101010100001101
00110111010101010111
01001010000001001010
10101010110101110101
10101010111010101011
01010111010101010101
Linguagem
simbólica
Slide 14
Slide 14 text
Linguagem Simbólica
C
Slide 15
Slide 15 text
Nível de abstração
01010111010100101010
10101010110101010101
01010101010101010101
01010101010100001101
00110111010101010111
01001010000001001010
10101010110101110101
Slide 16
Slide 16 text
Nível de abstração
MOV CH,24
MOV CL,3
Slide 17
Slide 17 text
Nível de abstração
long some_function() {
long test1;
test1 = another_function();
return test1;
}
example.c
Slide 18
Slide 18 text
Nível de abstração
#include
int main() {
std::cout << Hello, world!;
}
example.cpp
Slide 19
Slide 19 text
¯\_(ツ)_/¯
Pra quê essa ladainha?
Você não ia falar de web?
Slide 20
Slide 20 text
A INTERNET
Decidimos que a coisa mais legal a se
fazer era criar documentos interativos.
Slide 21
Slide 21 text
A INTERNET
Criamos protocolos para enviar esses
documentos (HTTP).
Slide 22
Slide 22 text
A INTERNET
Criamos uma linguagem para criar
esses documentos (HTML).
Hello, World!
Slide 23
Slide 23 text
A INTERNET
Criamos um software que fala essa
linguagem (browsers).
Slide 24
Slide 24 text
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/layers.png
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Slide 25
Slide 25 text
Rendering Engines
Firefox Gecko C++
Chrome Blink C++
Safari WebCore C++
IE Trident C++
Opera Presto/Blink C++
Slide 26
Slide 26 text
JavaScript Engines
Firefox SpiderMonkey C++
Chrome V8 C++
Safari JS Core C++
IE Chakra C++
Opera Carakan C++
Slide 27
Slide 27 text
Depois vieram
CSS JS
Slide 28
Slide 28 text
Nível de abstração
div#logo {
background: url(logo.png) no-repeat;
background-size: 269px 95px;
height: 95px;
width: 269px;
}
example.css
Slide 29
Slide 29 text
Toda vez que o nível de abstração
sobe, coisas MAIORES e
MELHORES tendem a acontecer.
Slide 30
Slide 30 text
Desenvolver um site é bem
mais complicado nos dias
de hoje.
Slide 31
Slide 31 text
localStorage
app cache
acessibilidade index db
geolocation
srcset
HTML5 semântico
orientationchange
gestos
acelerômetro
webGL
SVG
Canvas
segurança
Spam
Marketing
UX
APIs REST Responsive
Design
Performance
Testes
Design Patterns
Controle de
Versão
Slide 32
Slide 32 text
Whoooooa!
http://f1.thejournal.ie/media/2013/07/mindblown6.gif
Slide 33
Slide 33 text
http://www.holistikyasam.com/wp-content/uploads/2012/12/232-1024x768.jpg
Slide 34
Slide 34 text
Como as possibilidades crescem
e a gente pode tirar vantagem
delas, a complexidade também
cresce.
Slide 35
Slide 35 text
Aumentando o nível de
abstração, o nível de
complexidade cai.
Slide 36
Slide 36 text
Pré-processamento é uma
abstração (Enfim!)
Slide 37
Slide 37 text
Pré-processamento é uma
abstração (Enfim!)
E facilita nosso trabalho como
web developers.
Slide 38
Slide 38 text
CSS é o último da fila a
receber esse tratamento.
Slide 39
Slide 39 text
CSS
HTML JS
templates,
includes,
partials,
…
variáveis,
loops,
condicionais,
funções
…
http://rogovoyreport.com/wp-content/uploads/2014/08/Wiley-Coyote-Help.jpg
Slide 40
Slide 40 text
COMO PRÉ-PROCESSADORES
NOS AJUDAM
Slide 41
Slide 41 text
DISCLAIMER: vamos usar Sass,
mas qualquer pré-processador
que você decidir usar vai
facilitar o seu trabalho.
Slide 42
Slide 42 text
.scss .css
Local Servidor
Slide 43
Slide 43 text
Sass concatena e
comprime seu CSS.
Slide 44
Slide 44 text
.scss .css
Local Servidor
Slide 45
Slide 45 text
application.scss
@import "reset";
@import "colors";
@import "fonts";
@import "forms";
@import "header";
Slide 46
Slide 46 text
application.css
Slide 47
Slide 47 text
http://i4.minus.com/ieH5rw0zbvt9F.jpg
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
@import "colors";
@import "fonts";
@import "nav-mobile";
m-application.scss
@import "colors";
@import "fonts";
@import "nav-desktop";
application.scss
Slide 50
Slide 50 text
Variáveis
$brand: #C0FFEE;
$link: #36465d;
$error: #db4437;
$warning: #f4b400;
$success: #0f9d58;
$spacing: 2em;
$baseFontSize: 16px;
$baseLineHeight:
1.4;
$baseFontFamily:
“Helvetica Neue”,
Arial;
Slide 51
Slide 51 text
Nesting
.container { padding: 20px; }
.container a { color: #fff; }
.container > h3 { border-bottom: 1px
solid gray; }
.container ul { list-style: none; }
Slide 52
Slide 52 text
Nesting
.container {
padding: 20px;
a { color: #fff; }
> h3 { border-bottom: 1px solid gray; }
ul { list-style: none; }
}
Slide 53
Slide 53 text
Além de economizar tempo,
ajuda no entendimento do
código.
Slide 54
Slide 54 text
Media queries
.grid-1-4 {
width: 25%;
@media (max-width: 500px) {
width: auto;
}
}
Slide 55
Slide 55 text
@mixin fonts-body() {
font-family: "Gotham", Helvetica;
line-height: 1.4;
font-weight: 100;
color: #333;
}
body, textarea {
@include fonts-body;
}
Mixins
Slide 56
Slide 56 text
.flipper {
@include transition(transform 0.2 ease);
&:hover {
@include transition(rotate(180deg));
}
}
Mixins
Slide 57
Slide 57 text
Extend
.button {
background: $defaultBackgroundColor;
color: white;
padding: 5px 10px;
border-radius: 50%;
}
.button--big {
@extend .button;
font-size: 150%;
}
Slide 58
Slide 58 text
Toda vez que você for usar um
@mixin que não recebe
parâmetros, considere usar
@extend.
Slide 59
Slide 59 text
Placeholders
%clearfix:after {
content: "";
display: block;
clear: both;
border-radius: 50%;
}
.page-wrap {
@extend %clearfix;
}
Slide 60
Slide 60 text
CONVENCENDO O TIME
Slide 61
Slide 61 text
http://images.askmen.com/1200x600/video/entertainment-and-celebrities/douchebag-supercut-3-office-
space-1092286-TwoByOne.jpg
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Mah, peraí!
Sass simplifica o desenvolvimento e
diminui a complexidade do nosso site.
Slide 64
Slide 64 text
Mah, peraí!
Mudar pra Sass não é tão custoso
assim e pra aprender mesmo, só
precisa de uma vez.
Slide 65
Slide 65 text
Mah, peraí!
CSS3 é cheio de vendors e é bem fácil
de dar mer acontecer alguma coisa
que quebre o site em algum browser
diferente e são fod difíceis de manter.
Slide 66
Slide 66 text
MUDANDO PRO SASS
Slide 67
Slide 67 text
Todo .css é um .scss
válido.
Slide 68
Slide 68 text
style.css > style.scss
Slide 69
Slide 69 text
PROTIP: vá aprendendo e
usando as features
gradativamente.
Slide 70
Slide 70 text
Substitua todas as #cores
por $cores.
Slide 71
Slide 71 text
Aninhe os seletores que
se repetem demais.
Slide 72
Slide 72 text
Converta CSS3 para
@mixins.
Slide 73
Slide 73 text
Se você sabe CSS, você
aprenderá Sass em
menos de uma hora.
Slide 74
Slide 74 text
"ISSO NÃO É PRA MIM
PORQUE…"
Slide 75
Slide 75 text
"Já tenho um workflow
definido, isso aí só vai me
complicar."
Slide 76
Slide 76 text
Pode até ser um pouco
complicado no começo,
mas depois é só alegria.
Slide 77
Slide 77 text
"Se eu mudar pro Sass e
não gostar, não tem
volta."
Slide 78
Slide 78 text
Sass gera um CSS
completo e legível se
você quiser.
Slide 79
Slide 79 text
Se você odiar (o que eu
duvido), é reversível.
Slide 80
Slide 80 text
"Sass gera um CSS feio"
Slide 81
Slide 81 text
Ele gera exatamente o
que você diz para ele
gerar.
Slide 82
Slide 82 text
"Quando compilado, as media
queries não são agrupadas e o
CSS fica repetitivo"
Slide 83
Slide 83 text
"We eat CSS for breakfast,
motherf*cker!”
http://infocustesting.net/wp-content/uploads/2012/07/browsericons.png
Slide 84
Slide 84 text
"Eu tentei usar pré-
processadores num
projeto e não gostei"
Slide 85
Slide 85 text
…Said no one ever.
Slide 86
Slide 86 text
"As melhores features do
Sass vão ser adicionadas
ao CSS em breve"
Slide 87
Slide 87 text
Não espere para usar
amanhã o que você pode
usar agora.
Slide 88
Slide 88 text
"É mais difícil debugar"
Slide 89
Slide 89 text
Se seus arquivos estão
organizados, não.
Slide 90
Slide 90 text
CSS é para máquinas
http://i.kinja-img.com/gawker-media/image/upload/s--724aQkla--/c_fit,fl_progressive,q_80,w_320/
jppfwvawgzf7jadb7bfb.gif
Slide 91
Slide 91 text
CSS é legal, mas te faz bem
menos produtivo com tanta
repetição e baixo nível de
abstração.
http://i.imgur.com/TAlTwvW.gif
Slide 92
Slide 92 text
Pré-processadores FTW!
http://2.bp.blogspot.com/-jNuITNkQrZM/Tte1p4XLamI/AAAAAAAAA6k/3D8isbFjI4s/s640/
tumblr_lnawh3zdY11qaggjuo1_500.gif
Slide 93
Slide 93 text
Perguntas?
http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/6/12/20/anigif_enhanced-buzz-23392-1371082469-2.gif
Slide 94
Slide 94 text
Obrigado!
http://replygif.net/i/1095.gif