在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)
相关推荐
83417807 2020-06-28
88570299 2020-06-26
zhanghaibing00 2020-04-30
爱好HtmlCssJs 2019-10-29
wangjie 2019-10-25
Hashxu 2013-07-20
buttonChan 2019-07-01
ajhongshaorou 2019-06-30
wangnantjobj 2019-06-29
kaiya0 2016-11-03
lanzhusiyu 2019-06-27
wcssdu 2019-06-25
yyNet0 2013-04-23
bailangriver 2019-06-20
yibadouzi 2017-11-30
Ydgent 2013-09-09
qinxu 2010-11-16