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
110
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
54
Get start with react-test-library.
simoneas02
0
45
ES6 and Beyond pdf
simoneas02
0
150
Montando layouts em um mini game
simoneas02
2
240
Experiência na China Simone e Willany pareando <3
simoneas02
0
68
Front-end na vida real
simoneas02
0
200
It's me!!
simoneas02
0
86
Montando layouts em um mini game chamado Browser
simoneas02
1
180
It's me!!
simoneas02
0
230
Other Decks in Technology
See All in Technology
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
410
AOAI で AI アプリを開発する時にまず考えたいこと
mappie_kochi
1
490
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
coconala_engineer
0
200
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
400
Previewでもここまで追える! Azure AI Foundryで始めるLLMトレース
tomodo_ysys
2
470
『ささAI』ネタづくりをささえるAI📝 (にぼしいわし担当:GIFTech2025)
masapyon1212
0
100
企業が押さえるべきMCPの未来
takaakikakei
4
980
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
2
210
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
380
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
2
890
コードや知識を組み込む / Incorporating Codes and Knowledge
ks91
PRO
0
170
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
16
5.1k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Navigating Team Friction
lara
185
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Site-Speed That Sticks
csswizardry
6
540
The Invisible Side of Design
smashingmag
299
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
4 Signs Your Business is Dying
shpigford
183
22k
A better future with KSS
kneath
239
17k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Producing Creativity
orderedlist
PRO
344
40k
BBQ
matthewcrist
88
9.6k
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