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
120
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
57
Get start with react-test-library.
simoneas02
0
51
ES6 and Beyond pdf
simoneas02
0
170
Montando layouts em um mini game
simoneas02
2
240
Experiência na China Simone e Willany pareando <3
simoneas02
0
75
Front-end na vida real
simoneas02
0
210
It's me!!
simoneas02
0
94
Montando layouts em um mini game chamado Browser
simoneas02
1
190
It's me!!
simoneas02
0
240
Other Decks in Technology
See All in Technology
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.5k
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
270
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.8k
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
760
20250719_JAWS_kobe
takuyay0ne
1
170
AIコードアシスタントとiOS開発
jollyjoester
1
240
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
250
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
260
AI工学特論: MLOps・継続的評価
asei
10
1.9k
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
みんな Kiro ってる?
r3_yamauchi
PRO
0
120
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
180
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Side Projects
sachag
455
43k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Why Our Code Smells
bkeepers
PRO
337
57k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building an army of robots
kneath
306
45k
The Invisible Side of Design
smashingmag
301
51k
Raft: Consensus for Rubyists
vanstee
140
7k
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