How to append a unit to a unitless CSS custom property with calc()

I’ve seen complaints that you can’t append a unit to a custom property.

What you can’t do

The complaints seem to come from not being able to do something like this:

.icon {
  --scale: 1;

  /* this doesn't work */
  font-size: var(--scale) + 'px';
}

Granted, that would be awesome if we could do that. But we aren’t writing JavaScript, so we can’t.

calc() to the rescue

The CSS calc() function is one of those things that doesn’t always have a super obvious use. It’s awesome in a really sneaky way though. This is one of those sneaky awesome ways it can help us.

.icon {
  --scale: 1;

  /* this works */
  font-size: calc(var(--scale) * 1rem);
}

How this works

One of the coolest things with calc() is that it allows you to mix units when doing calculations. So I can do something like width: calc(100vw - 100px); or width: calc(50em - 25%); and the browser just figures it out.

In the case of using my --scale, it’ll multiply my unitless number by 1rem, adding rem to whatever I’ve put in my scale.

Putting it to use

Andy Bell recently posted a handy little trick on how to control the size of your icons with [font-size](https://andy-bell.design/links/121/).

This is cool, as you can easily set up icons to inherit the font-size from their parent like so:

svg {
  width: 1em;
  height: 1em;
}

.icon {
  font-size: inherit;
  color: inherit;
}

If ever you need a larger or smaller icon, you can change the font-size.

.icon-large {
  font-size: 1.5em;
}

While this is awesome, we can make everything a lot more readable by using a few custom properties:

svg {
  width: 1em;
  height: 1em;
}

.icon {
  font-size: var(--scale);
  color: var(--color, currentColor);
}

This is great, but our scale requires us to use a unit right now. We can improve this by using calc() like we did above.

.icon {
  font-size: calc(var(--scale) * 1em));
  color: var(--color, currentColor);
}

Here it is in use:

See the Pen Appending a unit to a custom property by Kevin (@kevinpowell) on CodePen.