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
100
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
35
ES6 and Beyond pdf
simoneas02
0
140
Montando layouts em um mini game
simoneas02
2
230
Experiência na China Simone e Willany pareando <3
simoneas02
0
62
Front-end na vida real
simoneas02
0
200
It's me!!
simoneas02
0
78
Montando layouts em um mini game chamado Browser
simoneas02
1
170
It's me!!
simoneas02
0
170
Other Decks in Technology
See All in Technology
require(ESM)とECMAScript仕様
uhyo
3
720
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
260
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
430
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
130
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
240
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Become a Pro
speakerdeck
PRO
11
4.5k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Infographics Made Easy
chrislema
238
18k
RailsConf 2023
tenderlove
4
540
Raft: Consensus for Rubyists
vanstee
132
6.3k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
What's new in Ruby 2.0
geeforr
337
31k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
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