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
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
AkarengaLT vol.38
hashimoto_kei
1
110
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
12k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
670
CSC305 Lecture 09
javiergs
PRO
0
300
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
Webサーバーサイド言語としてのRustについて
kouyuume
1
4k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
CSC509 Lecture 06
javiergs
PRO
0
260
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Speed Design
sergeychernyshev
32
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
We Have a Design System, Now What?
morganepeng
53
7.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Bash Introduction
62gerente
615
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Pragmatic Product Professional
lauravandoore
36
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.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