Hasty Treat - Uses for CSS Variables

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off. Show Notes 3:25 - What --example-name, represent custom properties called using var() Overwrite with a more specific style Use JavaScript to append .style.setPropert( How are they scoped? Just like normal CSS Can be set on :root {} Can be set on any element down 9:10 - Why Uses: Can make more sense if used semantically var(–accent) vs var(–yellow) Independent values for things that can’t be broken up: box-shadow: 2px 2px 2px 2px red transform: rotate(var(–rotate)) scale(2); Inline properties can be picked up by regular CSS (color, size, etc.) hey Themes that can easily be changed at runtime for entire app 19:15 - Calculations You can use them inside of calc() Animations 20:10 - Bummers Not super well supported just yet (IE 11) No good fallback other than manual fallback Syntax - Old Browsers, Fallbacks and Polyfills series Part 1 Part 2 Part 3 PostCSS Custom Properties Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets