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
85
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
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
REXML改善のその後
naitoh
0
190
Kotlin 2.0 and Beyond
antonarhipov
2
150
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
How to Break into Reading Open Source
kaspth
2
210
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
990
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Making Projects Easy
brettharned
113
5.8k
Writing Fast Ruby
sferik
623
60k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
BBQ
matthewcrist
83
9.2k
What the flash - Photography Introduction
edds
67
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Clear Off the Table
cherdarchuk
91
320k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
GitHub's CSS Performance
jonrohan
1030
450k
Practical Orchestrator
shlominoach
185
10k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
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