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