使用百分比作为 CSS calc() 的乘数

Question

假设我定义了一个 CSS 变量 --half 等于 50%.

:root {
  --half: 50%;
}

然后我可以像这样将某物的 width 设置为 50%：

.partial {
  width: var(--half);
}

到目前为止一切顺利。假设我有一个要垂直填充视口的 tall 元素：

.tall {
  height: 100vh;
}

太棒了。最后，如果使用 partial，我希望我的 tall 元素仅填充垂直 space（即 50vh）的一半。所以我尝试了这个：

.tall.partial {
  height: calc(100vh * var(--half));
}

糟糕，这似乎不起作用。如果我将 --half 重新定义为等于 0.50:

它确实有效

:root {
  --half: 0.50;
}

但是我上面的 width 设置将无法单独使用变量。

问题 A 部分： 如何在 CSS calc() 表达式中使用 XX% 指定并将其解释为百分比值作为乘法因子？

问题 B 部分： 如果无法完成，有没有办法根据实际值定义百分比值，反之亦然，例如遵循虚构的定义？（我不想定义重复的“镜像”值，一个是百分比值，一个是小数点值。）

:root {
  --half-factor: 0.50;
  --half: calc(var(half-factor) * 100)%;
}

Answer 1

如果我不得不定义两个单独的变量（问题的 B 部分），看来我可以这样做：

:root {
  --half-factor: 0.50;
  --half: calc(100% * var(half-factor));
}

这样一来，我的应用程序就可以运行，并且值最终取决于一个值定义（此处 --half-factor）。但是，如果有一种方法可以用一个定义来完成这两个用例，我很想知道它。（我知道我可以内联 calc(100% * var(half-factor)) 而不是使用 var(--half) 但这不是我所说的“单一定义”的意思。）

Answer 2

将单位视为一个变量，您可以像下面那样做：

:root {
  --quarter:25;
  --half:50;
  --threeQuarter:75;
}
* {
   --quarter-R:calc(var(--quarter) * var(--u,1%));
   --half-R:calc(var(--half) * var(--u,1%));
   --threeQuarter-R:calc(var(--threeQuarter) * var(--u,1%));
}

.box {
  height:50px;
  background:red;
  margin:5px;
  width:var(--half-R);
}

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

<div class="box" style="--u:1vw"></div>
<div class="box" style="--u:1vw;width:var(--threeQuarter-R);"></div>
<div class="box" style="--u:1vw;width:var(--quarter-R);"></div>
<div class="box" style="--u:1vh"></div>

使用百分比作为 CSS calc() 的乘数

Using percents as multipliers with CSS calc()

css

css-variables

css-calc