FELLIPE AZAMBUJA
femontanha (Montanha)
Essa é minha primeira palestra :)
Slide 3
Slide 3 text
ATUALMENTE:
Redes sociais como @femontanha
Slide 4
Slide 4 text
EVOLUÇÃO DO CSS
A tendência do CSS é sempre crescer, mesmo que nada de
novo seja adicionado ao sistema
Slide 5
Slide 5 text
Nenhuma reutilização de código (Código duplicado)
Mal organizado
Manutenção péssima
Override em tudo (Uma classe a mais, !important)
Slide 6
Slide 6 text
CSS + OBJETOS
Para tentar reaproveitar o código, implementaram o conceito
de objetos
Separando o CSS em pequenos blocos, com funções
específicas
Slide 7
Slide 7 text
EXEMPLO
.
t
e
x
t
-
c
e
n
t
e
r {
t
e
x
t
-
a
l
i
g
n
: c
e
n
t
e
r
;
}
.
r
a
d
i
u
s
-
m
e
d
i
u
m {
b
o
r
d
e
r
-
r
a
d
i
u
s
: 3
p
x
;
}
<
d
i
v c
l
a
s
s
=
"
t
e
x
t
-
c
e
n
t
e
r r
a
d
i
u
s
-
m
e
d
i
u
m r
i
g
h
t
C
o
l n
e
w
s
B
u
t
t
o
n e
t
c
"
>
.
.
.
<
/
d
i
v
>
Slide 8
Slide 8 text
CHEGOU! PRÉ-PROCESSADORES
SASS -- LESS -- STYLUS -- (...)
Slide 9
Slide 9 text
Melhor reutilização do código
Melhor estruturação do código
Manutenção efetiva
Melhor qualidade em um tempo igual ou melhor
Slide 10
Slide 10 text
O QUE UM PRÉ-PROCESSADOR TEM DE BOM?
Variavéis / Mixins / Funções
Loops e Condicionais / Extends / Placeholders
Nesting / Importação
Matemática / Manipulação de cor / ETC!
Slide 11
Slide 11 text
QUAL É O MELHOR? MAMILOS
O melhor é aquele que se encaixa com o seu projeto
Com qual você fica mais a vontade de trabalhar
Slide 12
Slide 12 text
SASS
Tem mais ou menos 8 anos de idade agora
API robusta, testada e atualizada
Muitas bibliotecas desenvolvidas
Documentação excelente
Trabalha bem com "gems" (Ruby)
Slide 13
Slide 13 text
LIBSASS = VELOCIDADE
Não trabalha só com Ruby mais
Libsass é a nova versão C/C++ do Sass
É extremamente mais rápido que a versão do Ruby, mas não a
mais veloz
Slide 14
Slide 14 text
SUPORTE DE BIBLIOTECAS
Foundation
Compass
Bootstrap (whynot?)
Bourbon.io
Slide 15
Slide 15 text
VARIAVÉIS
Setar cores, unidades, tipografia
Slide 16
Slide 16 text
EXTENDS
Usar as mesmas propriedades para diversas classes
.
s
i
d
e
-
b
a
r
,
.
l
i
s
t
,
.
m
a
i
n
-
n
a
v {
m
a
r
g
i
n
: 0
;
p
a
d
d
i
n
g
: 0
;
l
i
s
t
-
s
t
y
l
e
: n
o
n
e
;
}
Slide 17
Slide 17 text
@MIXINS
Como se fosse um include de propriedades, com parametrôs!
Slide 18
Slide 18 text
FUNCTIONS
Maior poder de programação, porém só retorna dados.
Não imprimi propriedades ou seletores.