CSS Calc - 总是达到 '0' 或 '1'答案

【问题标题】：CSS Calc - always achieve '0' or '1'CSS Calc - 总是达到 '0' 或 '1'
【发布时间】：2021-08-29 00:18:21
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： css css-variables css-calc

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用min()(documentation)，而不是尝试使用calc() 进行转换

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

这将返回变量或 1，以较低者为准，这将导致 1/0。

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

【讨论】：