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

Question

I have CSS variable called --size which is set with javascript. Its value will be 0 or any whole number.

I wish to create a new CSS variable using the calc function. I want the value of this new variable to be either 0 or 1.

If --size = 0 then the new variable = 0
If --size > 0 then the new variable = 1

I can use the below code to achieve this:

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

But when --size = 0, this does not work.

Is there a way that I can adjust my calculation to achieve 0 or 1 dependent on the value of the variable?

user_1650337 · Answer

Instead of trying to convert it using calc(), you could use min()(documentation)

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

This will return the variable or 1, whichever is lower, which should result in 1/0.

(This assumes that --size cannot be a fraction between 0-1 or a negative number)

user_8620333 · Answer

Use min()

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

If size = 0 then the result is 0. If bigger than 0 or smaller than 0, multiplied with a big value (and itself) it will get bigger than 1 and will get clamped to 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 */
}

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

2 Answers