Hasty Treat - Uses for CSS Variables — Syntax Podcast 097

A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 097: Hasty Treat - Uses for CSS Variables

0:00

LOUDNESS

Dec 3rd, 2018

Hasty Treat - Uses for CSS Variables

👇 Download Show✏️ Edit 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.)

    • <p style=”--color: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

Tweet us your tasty treats!