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
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Contemporary Test Cases
maaretp
0
140
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
990
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.8k
Amazon Qを使ってIaCを触ろう!
maruto
0
420
Jakarta EE meets AI
ivargrimstad
0
240
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
150
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Embracing the Ebb and Flow
colly
84
4.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Navigating Team Friction
lara
183
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Designing for Performance
lara
604
68k
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