css variable and concatenation with "px/em/rem" at the end

Question

My code looks like this as of now:

@media (min-width: 960px) and (max-width: 1280px){
    :root{
        --vint64-line-height: 1.4;
        --vint64-height: 1.4rem;
    }
}

@media (min-width: 640px) and (max-width: 960px){
    :root{
        --vint64-line-height: 1.3;
        --vint64-height: 1.3rem;
    }
}

@media (max-width: 640px){
    :root{
        --vint64-line-height: 1.2;
        --vint64-height: 1.2rem;
    }
}

I'd like to do something like

--vint64-height: var(--vint64-line-height)rem;

But it doesn't work and I'm frustrated.

Is there a way in core CSS to concatenate variable value with "rem" or "px" at the end to assign it to another value?

Answer 1

Just multiply by 1 unit. Like this:

--vint64-height: calc(var(--vint64-line-height) * 1rem);