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

Release date

Lydbog: 3. december 2018