less中使用calc函数计算错误

在less中使用clac函数为什么计算错误？

calc是css函数，在原生css中效果很好，calc部分解决了css中不能使用算数表达式的短板。css引擎会计算表达式的值，并对不同的单位进行转化，最终计 算出实际的值。less自身就有计算功能，即使不用calc函数，less也会进行计算：

div{
  left: 5px + 4px; // 9px
}

如果计算的单位不一致，less的处理就不像calc计算那么智能了，他会将第一个出现的单位当做所有子式的单位。

div{
  left: 6 + 5px + 5%; // 16px 
}

然后再来看less中使用calc的问题。在less解析阶段，less就把计算式自己计算了，等css运行的时候，已经是计算后的一个结果值了。要想解决这个问题，就得阻止less解析计算式，留着让css来。

解决方法1

less的转义运算’~'正好可以做这件事：

div{
  left: calc(~"100% - 5px")
}

解决方法2

less还有一个内置函数e()，

It expects string as a parameter and return its content as is, but without quotes. It can be used to output CSS value which is either not valid CSS syntax, or uses proprietary syntax which Less doesn’t recognize.

这个函数也可以避过解析，传进什么字符串，最后返回什么字符串（不带引号）。

div{
  left: e("clac(100% - 5px)")
}