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
51
Get start with react-test-library.
simoneas02
0
37
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
66
Front-end na vida real
simoneas02
0
200
It's me!!
simoneas02
0
82
Montando layouts em um mini game chamado Browser
simoneas02
1
170
It's me!!
simoneas02
0
190
Other Decks in Technology
See All in Technology
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
地理情報とAPIのトレンド
nagix
0
160
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
Classmethod Odyssey 登壇資料
yamahiro
0
390
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
The Cult of Friendly URLs
andyhume
75
5.9k
Become a Pro
speakerdeck
PRO
15
4.8k
Fireside Chat
paigeccino
25
2.8k
Producing Creativity
orderedlist
PRO
340
39k
Teambox: Starting and Learning
jrom
130
8.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
What's new in Ruby 2.0
geeforr
338
31k
We Have a Design System, Now What?
morganepeng
46
7k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
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