关于在Less中使用calc()的特殊现象

2,257 阅读2分钟

关于calc()那点事

1.起因

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

image.png

image.png

2.经过

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

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

``` css
    width:calc(~"100% - 28px");
```

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

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

之后他说他的编译器(IDE)可以正确的编译该Less,不加 ~"" 编译之后也是正确的。

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

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

image.png

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

3.查证

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

image.png 原来Less已经兼容了这个问题,那么为什么还会发生报错的问题的?

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

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

如有错误敬请指正。