如何使用无单位的CSS变量并在之后添加所需的单位？

Question

我试图用一个数字设置CSS变量，然后将其作为百分比在我的CSS中使用，在其他地方，我需要将它作为普通数字用于一些calc()操作。

例如

--mywidth:10;

div{width:var(--mywidth) + %;}  --- should be ---> width:10%

有可能吗？

- Ziv Feldman

Answer 1

使用calc()并与任何单位进行简单乘法运算：

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

示例：

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

<div class="box"></div>

- Temani Afif