PLAY PODCASTS
Hasty Treat - Uses for CSS Variables

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...

Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

December 3, 201825m 33s

Audio is streamed directly from the publisher (traffic.megaphone.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Original episode page

Show Notes

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

Tweet us your tasty treats!
← All episodes of Syntax - Tasty Web Development Treats