『解疑』css中calc()计算函数在less编译出错解决方法

问题

在使用less编写以下样式时：

height: calc(100% - 10px);

会被编译成：

height: calc(90%);

我们想要的结果应该是减去 10px 而不是 10%！

解决

这是因为less自带有 减 的方法，导致在编译时，会直接进行减法运算，而忽视了单位。
所以需要添加 ~ 符号进行转义，使其原样输出：

height: ~"calc(100% - 10px)";

或者

height: calc(~"100% - 10px");

以上代码皆可解决！

参考

css中left:_{'calc(20%)'这个“}”是什么意思？