分配 css 变量的单位

Question

是否可以将单位类型分配给 CSS 属性内的 CSS 变量？

:root {
    --width: 400;
}

.class {
    width: var(--width); //assign 'px' as unit?
}

Answer 1

您可以使用 calc() 函数将没有 px 值的 var 乘以 1px 来做到这一点，例如：

因为这会将值转换为最后的 px。
我搜索了很多，但我认为没有办法只将 px 添加到 var 而没有 calc().

:root {
    --width: 200;
}

div.a {
    width: calc(var(--width) * 1px);
    border: 1px solid black; 
}

<body>
<h1>Test</h1>

<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</div>

</body>

分配 css 变量的单位

Assign unit of css variable

css

css-variables