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
89
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
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
AWS Step Functions は CDK で書こう!
konokenj
5
870
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
良いコードレビューとは
danimal141
9
7.8k
JAWS Days 2025のインフラ
komakichi
1
330
Jasprが凄い話
hyshu
0
180
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
150
Jakarta EE meets AI
ivargrimstad
0
680
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.3k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
320
TCAを用いたAmebaのリアーキテクチャ
dazy
0
220
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Tale of Four Properties
chriscoyier
158
23k
Gamification - CAS2011
davidbonilla
80
5.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Why Our Code Smells
bkeepers
PRO
336
57k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Invisible Side of Design
smashingmag
299
50k
Speed Design
sergeychernyshev
28
820
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