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
Pré processadores CSS
Search
Fellipe Azambuja
August 04, 2015
Programming
1
95
Pré processadores CSS
Um resumo sobre a importância dos pré-processadores no CSS, dando ênfase no SASS
Fellipe Azambuja
August 04, 2015
Tweet
Share
More Decks by Fellipe Azambuja
See All by Fellipe Azambuja
React x Angular x Vuejs
femontanha
0
110
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
680
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
4
240
ニーリーにおけるプロダクトエンジニア
nealle
0
710
Select API from Kotlin Coroutine
jmatsu
1
210
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
170
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
390
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
400
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Fireside Chat
paigeccino
37
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cult of Friendly URLs
andyhume
79
6.5k
Navigating Team Friction
lara
187
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing for Performance
lara
609
69k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
PRÉ-PROCESSADORES CSS
FELLIPE AZAMBUJA femontanha (Montanha) Essa é minha primeira palestra :)
ATUALMENTE: Redes sociais como @femontanha
EVOLUÇÃO DO CSS A tendência do CSS é sempre crescer,
mesmo que nada de novo seja adicionado ao sistema
Nenhuma reutilização de código (Código duplicado) Mal organizado Manutenção péssima
Override em tudo (Uma classe a mais, !important)
CSS + OBJETOS Para tentar reaproveitar o código, implementaram o
conceito de objetos Separando o CSS em pequenos blocos, com funções específicas
EXEMPLO . t e x t - c e n
t e r { t e x t - a l i g n : c e n t e r ; } . r a d i u s - m e d i u m { b o r d e r - r a d i u s : 3 p x ; } < d i v c l a s s = " t e x t - c e n t e r r a d i u s - m e d i u m r i g h t C o l n e w s B u t t o n e t c " > . . . < / d i v >
CHEGOU! PRÉ-PROCESSADORES SASS -- LESS -- STYLUS -- (...)
Melhor reutilização do código Melhor estruturação do código Manutenção efetiva
Melhor qualidade em um tempo igual ou melhor
O QUE UM PRÉ-PROCESSADOR TEM DE BOM? Variavéis / Mixins
/ Funções Loops e Condicionais / Extends / Placeholders Nesting / Importação Matemática / Manipulação de cor / ETC!
QUAL É O MELHOR? MAMILOS O melhor é aquele que
se encaixa com o seu projeto Com qual você fica mais a vontade de trabalhar
SASS Tem mais ou menos 8 anos de idade agora
API robusta, testada e atualizada Muitas bibliotecas desenvolvidas Documentação excelente Trabalha bem com "gems" (Ruby)
LIBSASS = VELOCIDADE Não trabalha só com Ruby mais Libsass
é a nova versão C/C++ do Sass É extremamente mais rápido que a versão do Ruby, mas não a mais veloz
SUPORTE DE BIBLIOTECAS Foundation Compass Bootstrap (whynot?) Bourbon.io
VARIAVÉIS Setar cores, unidades, tipografia
EXTENDS Usar as mesmas propriedades para diversas classes . s
i d e - b a r , . l i s t , . m a i n - n a v { m a r g i n : 0 ; p a d d i n g : 0 ; l i s t - s t y l e : n o n e ; }
@MIXINS Como se fosse um include de propriedades, com parametrôs!
FUNCTIONS Maior poder de programação, porém só retorna dados. Não
imprimi propriedades ou seletores.
BONS FRAMEWORKS http://bourbon.io/docs
ORGANIZAÇÃO
ATOMIC DESIGN
E MUITO MAIS! Muito obrigado!
FELLIPE AZAMBUJA Twitter: @femontanha Github: @femontanha devnaestrada.com.br