CSS Custom Properties

Transcript

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