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

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

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

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

(这假设--size不能是0-1之间的分数或负数(