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
2k
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
130
Desenvolvimento Front End: o que não te ensinaram na escola
romulomachado
2
160
Other Decks in Programming
See All in Programming
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
280
Macとオーディオ再生 2024/11/02
yusukeito
0
330
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
120
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
540
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
340
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
570
Click-free releases & the making of a CLI app
oheyadam
2
100
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
190
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
110
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
510
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
500
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
How to train your dragon (web standard)
notwaldorf
88
5.7k
A better future with KSS
kneath
238
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Into the Great Unknown - MozCon
thekraken
32
1.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
How to Ace a Technical Interview
jacobian
276
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
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