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

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

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets