我想对 CSS 中的变量执行计算。有没有办法在没有预处理器或 JavaScript 的情况下做到这一点？ [公认]

Question

我想做这样的事情。我想对具有相同属性.

不同值的多个元素使用单个变量

像这样 v v v

: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

您在 calc 中添加的值需要一个单位。是 1px 还是 1rem 还是 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>

我想对 CSS 中的变量执行计算。有没有办法在没有预处理器或 JavaScript 的情况下做到这一点？ [公认]

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

css

var

calc