calc在Less中不生效的解决方法

calc在css文件中的正常写法

height: calc(100% - 44px); // 运算符前后都要有空格

然而在Less文件中这样写不生效，编译后的结果为height: 56%;
查其原因，是跟 Less 的语法冲突了，Less 把calc的参数当作运算式执行了(Less版本过低)。解决方式是使用 Less 的转义字符~，文档：https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping
所以在Less文件中的写法应为：

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

有变量的写法

@extra:50px;
width:calc(~"100% + @{extra}");
// 或者
width:calc(~"100% +"(@extra));  //变量外一定要加括号，结果中会自动添加空格
width:calc(~"100% +"(@extra)~"+ 2em");