sixyearsorless 2018-01-23
在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)