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
2.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
130
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
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
650
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
790
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
250
20250708_JAWS_opscdk
takuyay0ne
2
150
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Done Done
chrislema
184
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Gamification - CAS2011
davidbonilla
81
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Bash Introduction
62gerente
613
210k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
A Tale of Four Properties
chriscoyier
160
23k
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