Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
CSS Custom Properties a.k.a. CSS Variables
Slide 2
Slide 2 text
Sass
Slide 3
Slide 3 text
Sass → CSS
Slide 4
Slide 4 text
CSS
Slide 5
Slide 5 text
CSS
Slide 6
Slide 6 text
What’s the big deal? • part of CSS specification • no compilation • dynamic ✨
Slide 7
Slide 7 text
“Dynamic”…? Behold… *drumroll*
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Custom Properties CSS Custom Properties are a new feature in CSS. I encourage you to experiment with them! 320px 2rem 1rem
Slide 10
Slide 10 text
Custom Properties CSS Custom Properties are a new feature in CSS. I encourage you to experiment with them! 1440px 3rem 1.5rem
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Giving you some information. Warning you about a potential problem. Telling you about a serious error.
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
BTW
Slide 15
Slide 15 text
JavaScript? Demo time!
Slide 16
Slide 16 text
Browser support tl;dr no IE
Slide 17
Slide 17 text
Polyfill? Not really
Slide 18
Slide 18 text
Fallback? Yes. Browsers ignore declarations that they don’t understand.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
postcss-custom-properties PostCSS plugin that automatically adds fallbacks for CSS Custom Properties!
Slide 21
Slide 21 text
Try using Custom Properties today! --thanks-for: “listening”;