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
96
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
AIでLINEスタンプを作ってみた
eycjur
1
230
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
770
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
testingを眺める
matumoto
1
140
Ruby Parser progress report 2025
yui_knk
1
460
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Kiroで始めるAI-DLC
kaonash
2
630
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
旅行プランAIエージェント開発の裏側
ippo012
2
930
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Navigating Team Friction
lara
189
15k
Unsuck your backbone
ammeep
671
58k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Side Projects
sachag
455
43k
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