CSS Calc - 始终达到“0”或“1”

如何解决CSS Calc - 始终达到“0”或“1”

我有一个名为 --size 的 CSS 变量，它是用 javascript 设置的。其值为 0 或任意整数。

我希望使用 calc 函数创建一个新的 CSS 变量。我希望这个新变量的值为 0 或 1。

• 如果 --size = 0 那么新变量 = 0
• 如果 --size > 0 那么新变量 = 1

我可以使用以下代码来实现：

--new: calc(var(--size)/(var--size))

但是当 --size = 0 时，这不起作用。

有没有办法可以根据变量的值调整我的计算以达到 0 或 1？

解决方法

与其尝试使用 calc() 进行转换，不如使用 min()(documentation)

--new: min(--size,1); 

这将返回变量或 1，以较低者为准，结果应为 1/0。

（这里假设 --size 不能是 0-1 之间的小数或负数）

,

使用min()

--new: min(var(--size)*var(--size)*1000,1)

如果 size = 0 则结果为 0。如果大于 0 或小于 0，乘以一个大值（和它本身），它将大于 1 并被限制为 1

.box {
  --new: min(var(--size)*var(--size)*1000,1);
  
  height:50px;
  background:blue;
  margin:5px;
  
  border:calc(var(--new)*5px) solid red; /* either 5px here or 0 */
}

<div class="box" style="--size:2"></div>

<div class="box" style="--size:0"></div>

<div class="box" style="--size:200"></div>

<div class="box" style="--size:-200"></div>

<div class="box" style="--size:-.5"></div>

<div class="box" style="--size:.8"></div>