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
コロプラのオンボーディングを採用から語りたい
colopl
5
1.2k
テストを書かないためのテスト/ Tests for not writing tests
sinsoku
1
170
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 #RSGT2025 / Shift Right
nihonbuson
3
2.1k
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
3.7k
2024年活動報告会(人材育成推進WG・ビジネスサブWG) / 20250114-OIDF-J-EduWG-BizSWG
oidfj
0
230
AWS Community Builderのススメ - みんなもCommunity Builderに応募しよう! -
smt7174
0
180
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
120
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
290
2025年に挑戦したいこと
molmolken
0
160
Docker Desktop で Docker を始めよう
zembutsu
PRO
0
170
When Windows Meets Kubernetes…
pichuang
0
300
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
12
2k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Navigating Team Friction
lara
183
15k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Visualization
eitanlees
146
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
Writing Fast Ruby
sferik
628
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
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