记录一个问题:在less中使用calc出现了非预期的编译结果。
例如:
.box {
height: calc(100vh - 5px);
}
在上例中,预期的结果是全屏高度减去5像素。但是less之后的结果为95vh。明显是有问题的,在less.js的github上面也找到了类似的问题。less对于calc中的单位处理存在问题。可以理解为将上例中的100vh - 5px
处理成了 100vh - 5vh
。这个问题在低版本的less中一直存在,可以通过字符转移进行处理:
.box {
height: calc(~"100vh - 5px");
}
注意新添加的~
和 双引号!
除了使用上面比较tricky的方法外,还可以通过升版本来解决。在v3.5.0-beta.2
版本中作者对此问题进行了修复。如果版本可以兼容的话,可以提高版本来解决此问题。