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
95
Montando layouts em um mini game chamado Browser
simoneas02
1
190
It's me!!
simoneas02
0
250
Other Decks in Technology
See All in Technology
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
240
serverless team topology
_kensh
2
130
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
280
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
OSSで50の競合と戦うためにやったこと
yamadashy
3
940
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
230
事業開発におけるDify活用事例
kentarofujii
4
1.3k
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
120
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
180
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
4 Signs Your Business is Dying
shpigford
185
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Agile that works and the tools we love
rasmusluckow
331
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
How GitHub (no longer) Works
holman
315
140k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Statistics for Hackers
jakevdp
799
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
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