Using variables in CSS

Basic usage of CSS custom properties — variables

Using variables in CSS is genuinely useful. It removes overlap from your stylesheet and shortens your code. It also boosts efficiency—changing a single line propagates everywhere the variable is used, so you no longer need Ctrl+F to update each duplicate by hand.

What you need to do:

1. Declare a variable at the top of your stylesheet, with a value.
2. Reference it in your CSS.

I've maintained this design portfolio for about a year. Every time I needed to change a font size or background color, I used to wander through the stylesheet with Ctrl+F to find and update each duplicate—until I discovered CSS variables. Here's how to use them.

Basic usage

Declaration

The :root pseudo-class acts as a selector. At the top of your stylesheet, declare a variable name like --var-name and assign a value:

Reference

Now you can reference the variable anywhere with var():

This colors every p tag with --paragraph-color. The advantage of variables is that once you declare them, you can reuse them anywhere as many times as you want. To revise, just change the value at the declaration.

In this example I reference --paragraph-color from two tags and one class. They all become #656c7a because that's the value I set on the :root selector.

To change --paragraph-color, you don't need to update every occurrence in your stylesheet. Updating the value at :root updates every line that references the variable.

Applications

CSS variables can also be calculated. A variable holding a number can be used in many ways.

I declared --font-size with the value 1. I can use it as is, but calc() lets us derive other values from it. See the examples below:

The value of --font-size is the integer 1. If you wanted to use 3 you could declare another variable, but that's inefficient. The cleaner approach is to use calc() together with var() to derive new values from the existing variable. In this case:

• margin-top = 16px
• font-size = 3rem
• line-height = 1.5em

This way you can reuse a single variable as multiple values across various properties. With calc(), you can use any operator: plus, minus, multiply, divide.

See the Pen CSS3 custom properties by Hyouk Seo (@Spemer) on CodePen.

Can I use?

As of writing (November 18, 2017), caniuse.com reports 76.28% of browsers fully support CSS variables, with another 1.62% partial support globally. Check the latest report at caniuse.com.

Usage report from caniuse.com

Takeaway

You can see how I used CSS variables on this site in my GitHub.

If you're not yet comfortable with CSS preprocessors like Sass or Less, CSS variables are a great alternative—easy to learn, easy to use, and surprisingly powerful. That's why I switched my stylesheet to use them.

Thanks for reading.