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
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
110
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
250
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
370
20251027_マルチエージェントとは
almondo_event
1
430
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
What's new in OpenShift 4.20
redhatlivestreaming
0
260
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.4k
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
420
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
200
事業開発におけるDify活用事例
kentarofujii
5
1.5k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
161
23k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Practical Orchestrator
shlominoach
190
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Language of Interfaces
destraynor
162
25k
Why Our Code Smells
bkeepers
PRO
340
57k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
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