嵌套计算操作答案

【问题标题】：Nested calc operations嵌套计算操作
【发布时间】：2014-01-11 00:25:39
【问题描述】：

希望这很简单。我想使用 CSS calc 操作来执行两个计算：

我想将我的宽度设置为相当于

(100% / 7) - 2

但是，如果我尝试在 CSS calc 操作中执行多个操作，则会失败：

width: calc((100% / 7) - 2);

如何在一个 CSS 语句中执行多个计算操作？

【问题讨论】：

如果我是你，我会考虑 LESS 或其他预处理器。
或者你可以把 100 除以 7 再减去 2

标签： css expression css-calc

【解决方案1】：

显然，您必须将px 或% 分配给所有未被乘除的数字。

width: calc((100% / 7) - 2px);

嗯，我现在感觉很愚蠢。哈哈。

【讨论】：

所有浏览器都支持嵌套calc() 表达式吗？
澄清一下，不一定是px 或%。也可以是em、rem 等...
很遗憾 IE 仍然不支持nested calc() expressions@Aziz
我是 2022 年的。这种笨蛋在世界范围内仍在使用......

【解决方案2】：

正如 David 已经说过的，calc 需要 px、% 或某种单位才能工作。可以在一个语句中使用多个计算，就像：

width: calc((100% / 7) - 2px);

对于访问此页面寻找答案的其他人，值得一提的是，它可以是任何单位。也就是说，不仅仅是 px 和 %，还有 em、rem、vh、vw、vmin、vmax 等。 Calc 解析为您可以正常使用的值，因此您永远不会指定 width: 100；你永远不应该让 calc 的结果没有单位。

在除法或乘法时，两边都使用单位并没有什么意义，但它仍然需要其中一个数字有单位，以便它知道分配结果的内容。

/* These are wrong */
width: calc(75 + 25);
width: calc(4 * 20);
width: 100;

/* These are what the browser expects */
width: calc(75px + 25px);
width: calc(20px * 4);
width: 100px;

【讨论】：

【解决方案3】：

当我尝试这样做时，我也很头疼，但幸运的是还有另一种选择。您也可以使用 var() 来使用纯 css 变量，而不是将它们全部写在一行中，除了解决这个问题之外，它也更具可读性！这是我如何使用它的示例：

#wrapper .leftside .week .superior {
    --wholeWidth: calc(157px * 3);
    --remaining: calc(100% - var(--wholeWidth));
    margin: 0 calc(var(--remaining) / 6);
}

我在 MDN 文档的“Nested calc() with CSS Variables”下找到了它。

【讨论】：