最近在阅读别人的VUE组件源码时,发现了其使用了less计算函数calc,里面用到了“~”符号,百思不得其解,在官网上也没有特别说明的地方,于是通过某搜索引擎,终于找到了答案:
在less中,calc(100% - 4rem) 等带单位的混合运算会被less解析忽略单位,全部按照百分比计算,此例中的计算被less编译成calc(96%)。
解决方案
max-height: calc(~"100vh - 69px");
结合less使用特点
@postHeight: 46px;
@postBorderHeight: 1px;
@postMarginHeight: 10px;
margin-bottom: calc(~"@{postHeight}" )
margin-bottom: calc(~"@{postHeight} + @{postBorderHeight} * 3 + @{postMarginHeight} * 2" )
提示:注意运算符(+ - * / )的前后一定要有空格,便于解析!!!