关于less中使用calc计算出错

在某些情况下，为了更好的适配浏览器，我们会在css里面用上calc方法来准确的计算出元素的高度或宽带等属性。

例如：

需求：让页面内容刚好填充一屏幕高度。

页面内容分为2部分，已知头部导航栏为80px，此时我们只需要拿到屏幕高度 - 导航栏高度（80px），等到的像素就是内容区域的高度了，css我们这样写就可以了

.body { height: calc(100vh-80px) }

但如果你使用了less，你会发现，这里的高度并不如我们所愿，此时高度会奇怪的变成了 20vh。那是因为 less 中本来有 - 运算操作，我们 calc 中加上 ~'' 就可以 阻止被 less 编译（来自网友的解释）。

.body { height: ~'calc(100vh-80px))' }

这样一来，我们就可以得到正确的结果了。