css - css 变量和最后与“px/em/rem”的连接

Question

到目前为止，我的代码如下所示：

@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;
    }
}

我想做类似的事情

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

但它不起作用，我很沮丧。

核心 CSS 中有没有办法在最后将变量值与“rem”或“px”连接起来以将其分配给另一个值？

标签： css

Answer 1

只需乘以 1 个单位。像这样：

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