为什么CSS calc（）函数不起作用？

为什么这一个

calc（100vw/4）

有效，但以下两个都无效

calc（100vw/4-（10-4））

calc（100vw/4-（10px-4））

calc（100vw/4-（10px-4px））

calc（100vw/4-calc（10px-4px））

---

如何管理表达式

calc（100vw/x-（10px-x））

在SASS循环中替换

x

以工作？

您需要在运算符之间添加空格，忘记它们是常见的错误。我们也可以使用

calc

嵌套操作，但它们相当于简单的括号

从：

注意：

+

和

-

运算符必须用空格包围。对于 实例，

calc（50%-8px）

将被解析为一个百分比，后跟一个 负长度是无效的表达式，而

calc（50%-8px）

是 百分比后跟减法运算符和长度。同样地

calc（8px+-50%）

被视为一个长度，后跟一个加法 运算符和负百分比

*

和

/

运算符不需要空格，而是为 一致性是允许的，也是推荐的

注意：允许嵌套

calc（）

函数，在这种情况下 内部的被视为简单的括号

.one{
背景：红色；
宽度：计算（100%-150px）；
保证金顶部：计算（20px+计算（40px*2））；/*与计算（20px+（40px*2））相同*/
高度：计算（100px-10px）；
填料：钙（5%+10px）钙（5%-5px）；
}

CSS不是一种编程语言，因此不可能进行复杂的计算，也不应该如此。但你可以在互联网上到处看到关于嵌套计算的提及。所以只有一个操作员，没有嵌套？@Matthias。我不同意你的看法。即使CSS不是一种编程语言，我们有时也可以考虑做一些复杂的计算，以获得一些结果。当然，我们首先需要寻找简单的解决方案，但有时我们需要复杂的解决方案。@Temaniaf如果您真的需要进行如此复杂的计算，那么您应该使用Javascript或预处理器，它支持这一点并生成纯CSS。CSS应该尽可能简单possible@MatthiasS. 在这种情况下，为什么CSS中有

calc

？为什么我们可以嵌套

calc

操作？这是有原因的：例如，一个没有JS编程知识的设计师将能够使用这些东西来做他想做的事情。你知道所有浏览器是否都支持

calc（）

nesting吗？@NicolasHoizey我会说是的，但你可能会发现一些特殊情况。。您可以参考此链接。。“已知问题”部分我没有发现任何关于在CanIUse筑巢的提及，这就是为什么我在那里问…；-）@NicolasHoizey这就是为什么它是肯定的，除非你发现一些不起作用的东西或者你面临一个特殊的情况；）