×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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”;