By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
AD
Episode
223
Web News

CSS Variables - What Are They & How to Use Them

Recorded:
November 24, 2022
Released:
November 30, 2022

CSS variables are a powerful vanilla CSS feature that you need to start using on your next project. You don't need any frameworks, plugins, or other tooling to get started. When used correctly, they can be a huge boost to your project's organizing and productivity - helping keep things readable and easily maintained. This week Matt & Mike discussed what CSS variables are and how to get started using them in your next project.

Listen

Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes

Topics & Timestamps

This episode is closely related to one of our written guides, which you can find here

  • What are CSS variables? | 00:04:51
    - custom properties
    - set, store, and use values
  • What are CSS variables used for? | 00:07:46
    - theming websites
    - organizing color schemes
    - innovative uses (ie responsivity)
  • How to set up and use a CSS variable | 00:16:11
    - valid variable names
    - local declaration
    - global declaration
    - var() function
  • Example breakdowns | 00:42:33
    - Example 1 - Global Scope
    - Example 2 - Local Scope
    - Example 3 - Local & Global