How to Use Unitless CSS Variables with Flexibility

Unitless CSS variables provide the ability to store numeric values that can be conveniently used throughout a stylesheet. However, there may arise scenarios where you desire to use the same variable in different contexts, requiring varying units such as percentages or pixels.

An example of this dilemma would be setting a CSS variable with the value of 10 but needing to use it as a percentage in one instance and as a plain number for calculations in another.

The solution lies in utilizing the calc() function. By performing a simple multiplication of the variable with the desired unit within the calc() function, we can achieve the required flexibility.

For instance, to convert the variable --mywidth with a value of 10 into a percentage, simply use:

div{width:calc(var(--mywidth) * 1%);}

This will result in the width property being set to 10%, exactly as intended.

The versatility of this approach extends to various units, allowing you to seamlessly switch between percentages, pixels, or any other unit of measurement required within the same stylesheet.

To illustrate this, consider the following code snippet:

:root {
  --a:50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg),blue 50% ,green 0);
  padding:20px;
  
  box-sizing:border-box;
}

In this example, the variable --a is used to define various properties, including the width, border, background, and padding. By utilizing units within the calc() function, each property can be adjusted dynamically based on the value stored in --a.