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
52
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
200
Other Decks in Technology
See All in Technology
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7.1k
実務における脅威モデリングを考えよう
nikinusu
0
670
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
190
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
210
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
230
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
240
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
Featured
See All Featured
The Invisible Customer
myddelton
119
13k
Rails Girls Zürich Keynote
gr2m
93
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
A Philosophy of Restraint
colly
202
16k
The Cult of Friendly URLs
andyhume
76
6k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Designing with Data
zakiwarfel
98
5k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Facilitating Awesome Meetings
lara
49
6k
KATA
mclloyd
27
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