I want to perform calculation on a variable in CSS. Is there a way to do this WHITHOUT preprocessors or JavaScript? [ACCEPTED]

Question

I want to do something like this. I want to make use of a single varible for multiple elements that have different values for the same property.

like this vvv

:root {
  --brd_rad: 2rem;
}

#something {
  border-radius: var(--brd_rad);
}

#other-thing {
  border-radius: calc(var(--brd_rad) + 1);  /*obviously this doesn't work */
}

Answer 1

You need a unit in the value you're adding in the calc . Is it meant to be 1px or 1rem or 1% ?

 :root { --brd_rad: 2rem; } #something { border-radius: var(--brd_rad); border:1px solid blue; height:100px; } #other-thing { border:1px solid red; height:100px; border-radius: calc(var(--brd_rad) + 1rem); }

 <div id="other-thing"></div> <div id="something"></div>