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
98
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
120
Other Decks in Programming
See All in Programming
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
880
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
4
140
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
410
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.8k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
440
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
EMこそClaude Codeでコード調査しよう
shibayu36
0
330
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Making Projects Easy
brettharned
120
6.4k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Fireside Chat
paigeccino
40
3.7k
4 Signs Your Business is Dying
shpigford
185
22k
RailsConf 2023
tenderlove
30
1.3k
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