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
53
Get start with react-test-library.
simoneas02
0
42
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
67
Front-end na vida real
simoneas02
0
200
It's me!!
simoneas02
0
84
Montando layouts em um mini game chamado Browser
simoneas02
1
180
It's me!!
simoneas02
0
220
Other Decks in Technology
See All in Technology
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
OPENLOGI Company Profile for engineer
hr01
1
20k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
4k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
280
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
680
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.4k
AIエージェント入門
minorun365
PRO
32
19k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
510
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
220
Featured
See All Featured
Facilitating Awesome Meetings
lara
53
6.3k
Speed Design
sergeychernyshev
27
810
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
It's Worth the Effort
3n
184
28k
A better future with KSS
kneath
238
17k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A designer walks into a library…
pauljervisheath
205
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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