Podcasts Technology Syntax - Tasty Web Development Treats Hasty Treat - Uses for CSS Variables

Hasty Treat - Uses for CSS Variables

Published: Dec. 3, 2018, 2 p.m.

b'

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\\u2019re better than various preprocessor\\u2019s variables, and pitfalls to watch out for and avoid.

Kyle Prinsloo\\u2019s Freelancing & Beyond \\u2014 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\\xa0https://studywebdevelopment.com/freelancing\\xa0and use the coupon code \\u201csyntax\\u201d at checkout to get 25% off.

Show Notes

3:25 - What

  • --example-name, represent custom properties

  • called using\\xa0var()

  • 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(\\u2013accent) vs var(\\u2013yellow)

  • Independent values for things that can\\u2019t be broken up:

    • box-shadow: 2px 2px 2px 2px red
    • transform: rotate(var(\\u2013rotate)) 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!

'