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

Question

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

例子

--mywidth:10;

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

是否可以？

Answer 1

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

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

例子：

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