嵌套的计算操作

Question

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

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

(100% / 7) - 2

然而，如果我尝试在 CSS 计算操作中执行多个操作，它将失败：

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

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

- Liftoff

---

如果我是你的话，我会考虑使用LESS或其他预处理器。 - Benjamin Gruenbaum

或者你可以直接将100除以7再减去2。 - Deryck

Answer 1

看起来你必须给所有未被乘或除的数字分配px或%.

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

现在我感到有点愚蠢。哈哈。

- Liftoff

---

所有浏览器都支持嵌套的 calc() 表达式吗？ - Aziz

需要翻译的内容：Just to clarify, it doesn't have to be px or %. It could also be em, rem, etc...为了澄清一下，它不一定是 px 或 %。它也可以是 em、rem 等等。 - rinogo

很遗憾，IE仍不支持嵌套的calc()表达式 @Aziz - clayRay

Answer 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;

- user1971419

Answer 3

当我尝试这样做时，我也遇到了很多头疼的问题，但幸运的是有一个替代方案。你可以使用纯CSS变量var()，而不是将所有内容都写在一行中，这不仅能解决这个问题，还更加易读！以下是我使用它的一个示例：

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

我在MDN文档的"嵌套使用CSS变量的calc()"部分找到了它。

- aderchox