Go offline with the Player FM app!
Hasty Treat - Uses for CSS Variables
Manage episode 222507138 series 1469447
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 — SponsorKyle 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 Notes3: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
- 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
825 episodes
Manage episode 222507138 series 1469447
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 — SponsorKyle 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 Notes3: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
- 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
825 episodes
All episodes
×Welcome to Player FM!
Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.