低版本less处理calc冲突

以下代码在低版本less中会被编译成你意想不到的结果：

.box {
  width: calc(100% - 50px)
}

编译后：

.box {
  width: calc(50%)
}

导致这个结果的原因在于less中有一套自己的运算规则，解决方案如下：

.box {
  width: calc(~"100% - 50px")
}

原理：

“转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。”

我们希望less不要帮我们处理，所以这里我们可以使用less的转义语法让calc函数原样输出就好了

参考文档：

为什么CSS中的calc函数可能会不生效？ - 知乎