CSS variables is not working with calculation

Issue

I got some variables defined in root. However, when I use calc to calculate font size, I don't know why it's not working, what did I do wrong?

:root {
    --test-01: 20;
    --test-02: 120;
    --test-1: 1;
    --test-2: 3;
}

#test {
  font-size: clamp(var(--test-1)rem, calc(var(--test-1)rem + (var(--test-2) - var(--test-1)) * ((100vw - var(--test-01)rem) / (var(--test-02) - var(--test-01)))), var(--test-2)rem);
}

<p id="test">Testing...123</p>

Solution

You can not write var(--test-1)rem, you either have to specify the unit in the var declaration --test-1: 1rem or multiply by 1rem calc(var(--test-1) * 1rem).

Answered By - Jean Will