DEV Community

Cover image for CSS Variables Explained in 2 Minutes with an Interactive Demo
Gabe Romualdo
Gabe Romualdo

Posted on • Updated on • Originally published at xtrp.io

CSS Variables Explained in 2 Minutes with an Interactive Demo

CSS variables have been around for quite some time now, but are nevertheless extremely useful.

They can be defined in an element like this:

element {
    --my-variable: #555;
}
Enter fullscreen mode Exit fullscreen mode

The value of a variable can be just about anything, from pixel values to colors to linear-gradients.

You can use a variable almost anywhere by wrapping it in a var function:

another-element {
    color: var(--my-variable);
}
Enter fullscreen mode Exit fullscreen mode

Why Not Use a Preprocessor for Variables?

This is a very common question, as preprocessors seem to have solved the CSS variable problem even before native CSS variables existed!

However, CSS variables can be changed in real-time and aren't compiled, which means that it is possible to change the value of a CSS variable within JavaScript, and all references to that variable will be automatically changed. The example coming up uses this ability pretty well, and uses this ability of CSS variables to its advantage.

A Demo of CSS Variables in Action

One use CSS variables is the ability to use a singular variable for a site's primary color, and then allow the user to interactively change that primary color as they wish.

Here's a fun little CodePen that shows just that!

Here, I use some basic JavaScript code to change the CSS variable, and thus changing the theme color of the entire page.

Other Use Cases of CSS Variables

The example above is one of the many example use cases of CSS variables. Other possible uses include:

  • Creating a CSS variable for a default font size of an element and dynamically changing that for disabled users
  • Creating a CSS variable for the height and width of an element and dynamically changing that variable in a CSS animation
  • Creating CSS variables for each of the colors on your site an dynamically changing those variables to create a "dark mode" or different theme

Browser Support & Conclusion

CSS variables are supported in all major browsers except IE, QQ, and Baidu: CanIUse Data for CSS Variables.

I hope you enjoyed this explanation and demo of CSS variables and find them to be useful in your sites. I personally use CSS variables for colors and font sizes on the several of my sites, and have found them to help keep my styles much cleaner and easier to read and refactor.

Thanks for scrolling.

— Gabriel Romualdo, January 27, 2020

Top comments (5)

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

You missed the best part: CSS Custom Properties pierce shadow root boundaries, do you can use them to style web component internals

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Thanks for commenting, that's definitely something to keep in mind when working with the shadow DOM!

— Gabriel

Collapse
 
codenutt profile image
Jared

Well, I'm convinced now. Thanks for sharing!

Collapse
 
gaberomualdo profile image
Gabe Romualdo • Edited

Thank you!

— Gabriel

Collapse
 
osde8info profile image
Clive Da

wow ! it is possible to change the value of a CSS variable within JavaScript