关于calc()那点事

1.起因

​ 昨天公司部门群里抛出来一个bug，说是less编译不成功，问题如下

2.经过

这个问题很明显。Less在编译的时候把 100%-28px 当作了 100%-28%。

解决这个问题很容易，只需要加一组 ~"" 就能解决问题：

``` css
    width:calc(~"100% - 28px");
```
复制代码

这个css当时是一个后端同事写的（主要做后端，同时也做一些前端），在我给出解决方案之后他提出了一个问题：我之前也全都是这样写的，为什么之前就没有问题呢？

当时我也没反应过来，难道是因为这一个的效果影响比较大被看出来了？其他的效果影响不大看不出来？

之后他说他的编译器（IDE）可以正确的编译该Less，不加 ~"" 编译之后也是正确的。

按照我的知识储备来说，涉及知识盲区了，我个人知道Less在编译calc的时候会有这个问题，也养成了在写calc的时候加 ~"" 的习惯，编译报错在我认知之内，正常编译确实超出了意料。

接着我在VsCode里写了一下试了一下

确实，在VsCode里也正确的编译了这是为什么呢？

3.查证

去百度搜了一下，也只有在Less中使用calc为什么要加 ~"" 的文章，但是没有为什么不加也能正常编译的原因。
最终在Less的官网上找到了这么一段话

原来Less已经兼容了这个问题，那么为什么还会发生报错的问题的？

最后发现问题出现在项目编译时候所用的编译器上。公司用的是Koala，至于Koala为什么还未兼容暂时没找到答案。

那么诸位在使用calc的时候是否会加 ~"" 呢？

如有错误敬请指正。