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 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.)
- <p style=”--fg:red;”>hey</a>
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