在Less中使用calc完成不同单位的宽度计算

    在CSS中，calc的使用很简单，直接做加减法就行了（即使单位不同）： 

div > span {
  width: calc(100% - 10px);
}

 

    然而在Less中，这样写是不可行或者说达不到预期的效果的，需要转义calc的参数，具体语法如下：

div {
    > span {
        width:calc(~'100% - 10px');
    }
}

 

    并且还可以在calc函数中使用参数，以下是比较复杂的一种：

 

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width:calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

    以上代码编译为CSS后如下：

 

div > span {
  width: calc((100% - 10px) - 80px);
}

  

参考文章：

计算从LESS CSS中的百分比到像素减去像素的宽度(Calculating width from percent to pixel then minus by pixel in LESS CSS)