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
Variáveis Nativas com CSS
Search
Simone Amorim
February 11, 2017
Technology
1
120
Variáveis Nativas com CSS
Variáveis Nativas com CSS x Variáveis em pre-processadores
Simone Amorim
February 11, 2017
Tweet
Share
More Decks by Simone Amorim
See All by Simone Amorim
A Inclusão de Mulheres no Mercado de Tecnologia
simoneas02
0
57
Get start with react-test-library.
simoneas02
0
51
ES6 and Beyond pdf
simoneas02
0
170
Montando layouts em um mini game
simoneas02
2
240
Experiência na China Simone e Willany pareando <3
simoneas02
0
75
Front-end na vida real
simoneas02
0
210
It's me!!
simoneas02
0
94
Montando layouts em um mini game chamado Browser
simoneas02
1
190
It's me!!
simoneas02
0
240
Other Decks in Technology
See All in Technology
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
200
Connect 100+を支える技術
kanyamaguc
0
170
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
120
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
11k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
340
Github Copilot エージェントモードで試してみた
ochtum
0
140
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
110
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
11k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
530
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
110
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Designing for Performance
lara
610
69k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Balancing Empowerment & Direction
lara
1
400
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Transcript
A long time ago in a galaxy far far away…
Revenge of the Platform
I'm Simone Amorim, mother and studing for become a Front-End
Developer and CSS Evangelist <3 I love running and ride a bike! @simoneas02
http://www.w3.org/TR/css-variables/ CSS Custom Properties for Cascading Variables Module Level 1
Basics
Declare the Custom Properties .luke { --color: #000; --size: 200px;
}
Use with var() function .luke { --color: #000; --size: 200px;
background-color: var(--color); width: var(-size); height: var(-size); }
None
SCope
.container { --color: #000; } .box { background-color: var(—cor); }
// Bad <div class=“container”> O choose </div> <div class=“box”> You </div>
.container { --color: #000; } .box { background-color: var(—cor); }
// Good <div class=“container”> <div class=“box”> I choose You </div> </div>
:root { --cor: #000; } .luke { background-color: var(—cor); }
.leia { background-color: var(—cor); } // Good
FALLBACK
Use a second value .yoda { background-color: var(—color, green); width:
var(-size, 10px); height: var(-size, 10px); }
preprocessors x custom properties
Javascript
http://codepen.io/danield770/pen/rxqPOM
Support
http://caniuse.com/#search=variables
None
progressive enhancement
Double property trick .yoda { color: green; color: var(—color, green);
}
None
Para finalizar, o mais importante!
Código é só código, o que realmente importa é o
que o "codar" pode proporcionar para as pessoas que você ama.. “ - Afonso Pacifer
26 days Front-End Study
May the force be with you…
Thanks @simoneas02