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

Question

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

例子

--mywidth:10;

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

可能吗？

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>

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

How to use a unitless CSS variables and later add the needed unit?

css

css-variables