CSS got variable

Gordon Chen

Preprocessors like Sass and Less are used largely because they offer support for variables. Times have changed and CSS variables actually exist. Let’s take a look at what we need to know and how to use this new spec.

So what can we actually do with CSS variables? Well to start let's go over the key points:

  • No need for a preprocessor
  • They cascade meaning we can set a variable property inside any selector to override its property.
  • Immediate change. Once a variable property has changed the browser will repaint the view.
  • Accessible through javascript, meaning we can manipulate our values from javascript.

To start using CSS variables we specify our variables with two dashes like so:

:root { 
--color: #274259;
}

Now to reference said variable we have to use the var() function. Our resulting code:

div { 
background: var(--color);
}

Alright so now let's take a look at some of this in action.

Our code:

So what’s going on here? Well first off we create and set a variable named color. We then associate the divs border, color, and hover color with this variable. And here’s where the great thing about CSS variables comes in; when we want to set the color of the second div we can just override the color variable. So in our case, we did the following:

.circle.two {
--color: #48B0D9;
}
.circle.two:hover {
--color: #778C4A;
}

One thing you may be asking yourself is why did the border color change as well on hover. Reason for that is because on hover we are now saying we want the color variable to become this value; therefore, that change propagates not to just the selector but also to the element.

Dynamically Changing Variable Values

One big draw over preprocessors is that we are able to dynamically change CSS variables and have an immediate impact on the view.

In the above codepen, we have a box and a few sliders. The key here is that we specified the following properties to variables:

:root {
--color: #2E343F;
--position: 0;
--raduius: 0;
}
.box {
transform: translateX(var(--position));
background: var(--color);
border-radius: var(--radius);
}

The key here is that in our javascript we are modifying the CSS variable like so:

const root = document.documentElement;
function changeValue(id, value) {
const suffix = (id != 'color' ? '%' : '');
root.style.setProperty(`--${id}`, value + suffix);
}

What we’ve done above is set a constant root to our root DOM element. Within the changeValuefunction, we are grabbing the style and setting the property using the setPropertyfunction. And there we have it we are changing our CSS variables dynamically through javascript.

The great thing about what we just did is we now have the ability to change multiple values without ever having to loop through an array of elements, setting inline styles, or managing classes. All we have to do is manipulate a single variable and we can immediately see our changes reflected in the DOM. This makes our markup cleaner and our CSS got easier to maintain.

The takeaway:

  • Easier to maintain code. With variables, our code gets to be more readable therefore it’s going to be a lot easier to maintain and make future changes.
  • Can create themes. We can now have a single file with a bunch of variables that set up a theme for our application. When we want to make a sitewide change we can easily do so by just modifying one single file.
  • Dynamic. Being able to modify CSS variables through javascript and media queries allows us to create much more dynamic applications.
Gordon Chen

Written by

Frontend Web Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade