less中如何使用calc

普通写css时使用calc直接height：calc（100vh-60px)即可，但是我们发现在less编译模式中不管用了，是因为在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。

解决方案有一下几种写法：

一定注意，其中加的 '  ~  ' 都是英文状态下的，否则不起作用

//1、
height: ~"calc(100vh - 60px)";

//2、
height: calc(~"100vh - 60px");

//3、
height:e("calc(100vh - 60px)");

如果要是引入变量的话，

需要结合less使用特点：

     @postHeight: 60px;

    @postBorderHeight: 2px;

    @postMarginHeight:20px;

     margin-bottom: calc(~"@{postHeight}" )

     margin-bottom: calc(~"@{postHeight} + @{postBorderHeight} * 3 + @{postMarginHeight} * 2" )

以上就是less使用calc方法的解决办法，希望能帮到你！