CSS Custom Properties

Have you ever wanted to change the value of a Sass variable based on screen size, a state, or for any other reason that might require changing a Sass variable? Well you can’t. Not with a Sass variable anyway. But you can by using a custom CSS property. These are sometimes called CSS variables.

There have been times where I have defined a variable in Sass and then wanted to change it when that element is .active for example. Something like:

.element {
  $background: red;
  background-color: $background;

  &.active {
    $background: blue;
  }
}

It was always frustrating that I couldn’t do this. Then I found out about custom properties. They work in standard CSS as well as Sass (scss files). It’s pretty awesome because now you can totally change the value of a variable. By using custom properties, the above code becomes:

.element {
  --background: red;
  background-color: var(--background);

  &.active {
    --background: blue;
  }
}

Notice the difference between how the two variables are used. When using a Sass variable, you define it with a $ whereas with custom properties you need to start them with a double dash (--).

Sass variable: $background: red CSS Custom Property: --background: red

You use them in your styles differently as well. Sass variables are more straightforward. You simply add the same variable into the style value. When using a custom property, you must return the variable name using the CSS var() function.

Once you get the hang of it, you’ll never go back. I find that when inspecting websites lately, I notice things like colors and sizes being defined by custom properties a lot more. I think this has to do with how flexible custom properties are. I know I’ve been trying to use them more, but I try to learn why something is better before I dive right in. So far, I can’t say that I have seen a situation where a Sass variable would be more beneficial than a custom property, so why not just use custom properties?

Want to learn more about custom properties? CSS-TRICKS literally wrote A Complete Guide to Custom Properties.