CSS 计算 - 始终达到“0”或“1”

Question

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

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

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

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

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

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

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

Answer 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>

Answer 2

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

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

这将 return 变量或 1，以较小者为准，结果应为 1/0。

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

CSS 计算 - 始终达到“0”或“1”

CSS Calc - always achieve '0' or '1'

css

css-variables

css-calc