LESS 中复杂的 calc() 无法按预期工作答案

【问题标题】：Complicated calc() in LESS is not working as expectedLESS 中复杂的 calc() 无法按预期工作
【发布时间】：2021-03-28 10:28:30
【问题描述】：

我的 less 文件中有这个计算：

height: calc((100vh - 60px) + ((100vw / 9) * 3));

但结果不是我所期望的，在我的 chrome devtools 中结果是：

height: calc(73.33333333vh);

它应该（在我的视口中）是 130vh 之类的，离它很远。

我已经尝试为此找到解决方案，但无法修复它，并且由于值的“复杂”性质，我找不到可比较的案例。我尝试了以下计算，但结果总是错误的。

height: calc((~"100vh - 60px") + ((~"100vw / 9") * 3)); // breaks, doesnt build CSS
height: ~"calc((100vh - 60px) + ((100vw / 9) * 3))";    // results in invalid height value

有人知道出了什么问题吗？

非常感谢任何帮助。

【问题讨论】：

标签： css less css-calc

【解决方案1】：

经过大量尝试（字面意思是超过 2 小时），我想通了：

height: ~"calc(calc(100vh - 60px) + calc((100vw / 9) * 3))";

如果有人可以让我了解这里的机制，请告诉我。这是很长一段时间的猜测，在我开始实现 css 和更少的变量并得到我想要的结果后，我终于找到了这个解决方案。所以基本上这是 2 小时的反复试验

【讨论】：