css - CSS 中另一个 calc() 中的 calc() 函数

Question

如何在另一个 CSS calc 函数中使用 CSS calc 函数？根据这个post这是可能的，但没有这样的例子。

Answer 1

It is possible to use calc() inside another calc().

一个例子:

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}

---

更新 nested calc使用 css 变量:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

After all variables are expanded, widthC's value will be calc( calc( 100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( ( 100px / 2) / 2), i.e. 25px. In short: a calc() inside of a calc() is identical to just parentheses.

因此，当前规范也证明在 calc() 中使用括号是嵌套计算。

了解有关 css 变量的更多信息 here .