Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Por que usar pré-processadores CSS?
Search
Rômulo Machado
November 06, 2014
Programming
0
1.8k
Por que usar pré-processadores CSS?
Palestra ministrada na SCTI-UENF 2014.
Rômulo Machado
November 06, 2014
Tweet
Share
More Decks by Rômulo Machado
See All by Rômulo Machado
Ember.js: building better apps in less time
romulomachado
4
120
Sass: CSS com superpoderes
romulomachado
1
170
Como se manter atualizado com tecnologias front-end
romulomachado
2
120
Desenvolvimento Front End: o que não te ensinaram na escola
romulomachado
2
150
Other Decks in Programming
See All in Programming
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
280
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
930
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Rethinking UI building strategies @ SFI 2024
letelete
0
270
ONE WEDGE_company_guide
1wedge_one
0
490
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
What We Can Learn From OSS
inouehi
0
420
Ruby GitHub Packages
bkuhlmann
0
630
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Making Projects Easy
brettharned
108
5.5k
Design by the Numbers
sachag
274
18k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
GitHub's CSS Performance
jonrohan
1025
450k
Designing for Performance
lara
601
67k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Transcript
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
romulomachado_ romulomachado romulo.machado5 front-end e rails developer
None
Agenda • Abstração • Como pré-processadores nos ajudam • Convencendo
o time • Mudando pro Sass • "Isso não é para mim porque…"
ABSTRAÇÃO
Live coding, vou criar um site aqui, pera…
10101010101010101010101 010101010101011111010011010101010 101010101010100010101011101010101 010101001001001000100001010101110 101010101010101010101010101010101 011101010101011010101010101010101 010111010101010101010101010101111 010101010101010101010101010111010 101011011110001010100000000001010 101000010101000101110101010101010
101010101110101010101010101010110 1010111000
http://www.joaopessoa.pb.gov.br/portal/wp-content/uploads/2013/04/mallandro-2.jpg
101010 0 1 0 0 1 1 * * *
* * * 1 2 4 8 16 32 = = = = = = 0 0 0 32 2 8 42
1000001 A
1000010 B
Assembler Instruções em texto 01010111010100101010 10101010110101010101 01010101010101010101 01010101010100001101 00110111010101010111 01001010000001001010
10101010110101110101
Compilador Instruções em texto 01010111010100101010 10101010110101010101 01010101010101010101 01010101010100001101 00110111010101010111 01001010000001001010
10101010110101110101 10101010111010101011 01010111010101010101 Linguagem simbólica
Linguagem Simbólica C
Nível de abstração 01010111010100101010 10101010110101010101 01010101010101010101 01010101010100001101 00110111010101010111 01001010000001001010 10101010110101110101
Nível de abstração MOV CH,24 MOV CL,3
Nível de abstração long some_function() { long test1; test1 =
another_function(); return test1; } example.c
Nível de abstração #include <iostream> int main() { std::cout <<
Hello, world!; } example.cpp
¯\_(ツ)_/¯ Pra quê essa ladainha? Você não ia falar de
web?
A INTERNET Decidimos que a coisa mais legal a se
fazer era criar documentos interativos.
A INTERNET Criamos protocolos para enviar esses documentos (HTTP).
A INTERNET Criamos uma linguagem para criar esses documentos (HTML).
<h1>Hello, World!</h1>
A INTERNET Criamos um software que fala essa linguagem (browsers).
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/layers.png http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Rendering Engines Firefox Gecko C++ Chrome Blink C++ Safari WebCore
C++ IE Trident C++ Opera Presto/Blink C++
JavaScript Engines Firefox SpiderMonkey C++ Chrome V8 C++ Safari JS
Core C++ IE Chakra C++ Opera Carakan C++
Depois vieram CSS JS
Nível de abstração div#logo { background: url(logo.png) no-repeat; background-size: 269px
95px; height: 95px; width: 269px; } example.css
Toda vez que o nível de abstração sobe, coisas MAIORES
e MELHORES tendem a acontecer.
Desenvolver um site é bem mais complicado nos dias de
hoje.
localStorage app cache acessibilidade index db geolocation <picture> 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
Whoooooa! http://f1.thejournal.ie/media/2013/07/mindblown6.gif
http://www.holistikyasam.com/wp-content/uploads/2012/12/232-1024x768.jpg
Como as possibilidades crescem e a gente pode tirar vantagem
delas, a complexidade também cresce.
Aumentando o nível de abstração, o nível de complexidade cai.
Pré-processamento é uma abstração (Enfim!)
Pré-processamento é uma abstração (Enfim!) E facilita nosso trabalho como
web developers.
CSS é o último da fila a receber esse tratamento.
CSS HTML JS templates, includes, partials, … variáveis, loops, condicionais,
funções … http://rogovoyreport.com/wp-content/uploads/2014/08/Wiley-Coyote-Help.jpg
COMO PRÉ-PROCESSADORES NOS AJUDAM
DISCLAIMER: vamos usar Sass, mas qualquer pré-processador que você decidir
usar vai facilitar o seu trabalho.
.scss .css Local Servidor
Sass concatena e comprime seu CSS.
.scss .css Local Servidor
application.scss @import "reset"; @import "colors"; @import "fonts"; @import "forms"; @import
"header";
application.css
http://i4.minus.com/ieH5rw0zbvt9F.jpg
None
@import "colors"; @import "fonts"; @import "nav-mobile"; m-application.scss @import "colors"; @import
"fonts"; @import "nav-desktop"; application.scss
Variáveis $brand: #C0FFEE; $link: #36465d; $error: #db4437; $warning: #f4b400; $success:
#0f9d58; $spacing: 2em; $baseFontSize: 16px; $baseLineHeight: 1.4; $baseFontFamily: “Helvetica Neue”, Arial;
Nesting .container { padding: 20px; } .container a { color:
#fff; } .container > h3 { border-bottom: 1px solid gray; } .container ul { list-style: none; }
Nesting .container { padding: 20px; a { color: #fff; }
> h3 { border-bottom: 1px solid gray; } ul { list-style: none; } }
Além de economizar tempo, ajuda no entendimento do código.
Media queries .grid-1-4 { width: 25%; @media (max-width: 500px) {
width: auto; } }
@mixin fonts-body() { font-family: "Gotham", Helvetica; line-height: 1.4; font-weight: 100;
color: #333; } body, textarea { @include fonts-body; } Mixins
.flipper { @include transition(transform 0.2 ease); &:hover { @include transition(rotate(180deg));
} } Mixins
Extend .button { background: $defaultBackgroundColor; color: white; padding: 5px 10px;
border-radius: 50%; } .button--big { @extend .button; font-size: 150%; }
Toda vez que você for usar um @mixin que não
recebe parâmetros, considere usar @extend.
Placeholders %clearfix:after { content: ""; display: block; clear: both; border-radius:
50%; } .page-wrap { @extend %clearfix; }
CONVENCENDO O TIME
http://images.askmen.com/1200x600/video/entertainment-and-celebrities/douchebag-supercut-3-office- space-1092286-TwoByOne.jpg
None
Mah, peraí! Sass simplifica o desenvolvimento e diminui a complexidade
do nosso site.
Mah, peraí! Mudar pra Sass não é tão custoso assim
e pra aprender mesmo, só precisa de uma vez.
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.
MUDANDO PRO SASS
Todo .css é um .scss válido.
style.css > style.scss
PROTIP: vá aprendendo e usando as features gradativamente.
Substitua todas as #cores por $cores.
Aninhe os seletores que se repetem demais.
Converta CSS3 para @mixins.
Se você sabe CSS, você aprenderá Sass em menos de
uma hora.
"ISSO NÃO É PRA MIM PORQUE…"
"Já tenho um workflow definido, isso aí só vai me
complicar."
Pode até ser um pouco complicado no começo, mas depois
é só alegria.
"Se eu mudar pro Sass e não gostar, não tem
volta."
Sass gera um CSS completo e legível se você quiser.
Se você odiar (o que eu duvido), é reversível.
"Sass gera um CSS feio"
Ele gera exatamente o que você diz para ele gerar.
"Quando compilado, as media queries não são agrupadas e o
CSS fica repetitivo"
"We eat CSS for breakfast, motherf*cker!” http://infocustesting.net/wp-content/uploads/2012/07/browsericons.png
"Eu tentei usar pré- processadores num projeto e não gostei"
…Said no one ever.
"As melhores features do Sass vão ser adicionadas ao CSS
em breve"
Não espere para usar amanhã o que você pode usar
agora.
"É mais difícil debugar"
Se seus arquivos estão organizados, não.
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
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
Pré-processadores FTW! http://2.bp.blogspot.com/-jNuITNkQrZM/Tte1p4XLamI/AAAAAAAAA6k/3D8isbFjI4s/s640/ tumblr_lnawh3zdY11qaggjuo1_500.gif
Perguntas? http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/6/12/20/anigif_enhanced-buzz-23392-1371082469-2.gif
Obrigado! http://replygif.net/i/1095.gif