【less】unit-单位和其他常⽤参数
：Rabbit_svip
本节⽬录：
1. unit的⽤法
2. 向上取整 - ceil
3. 向下取整 - floor
4. 四舍五⼊ - round
5. 百分⽐转换 - percentage
6. 绝对值 - abs
unit 的⽤法
在less中，⽤unit来重置单位，有时候是⾮常实⽤的。
less代码
@num: 10px;
div {
height: unit(@num, rem);
}
可以看到，height⽤了unit，把设置好的变量@num的10px，变成10rem。
需要注意的是，rem是不⽤单引号或者双引号括起来的。
上⾯的代码转换成CSS的结果：
转换后的CSS
div {
height: 10rem;
}
如果unit第⼆个值是空，则转换后，是不带单位的。可以⾃⾏尝试，因为很少这样做，这⾥不做⽰范了
代码转换ceil - 向上取整
有时候通过计算后，得到⼀个值，希望通过向上取整。可以⽤到另⼀个参数：ceil
less代码
@num: 3.3px;
div {
height: unit(ceil(@num), rem);
}
转换后的CSS
div {
height: 4rem;
}
floor向下取整
less代码
@num: 3.9px;
div {
height: unit(floor(@num), rem);
}
转换后的css代码
div {
height: 3rem;
}
round 四舍五⼊
less代码
@numW: 3.9px;
@numH: 3.4px;
div {
width: unit(round(@numW), rem);  height: unit(round(@numH), rem); }
转换后的css代码
div {
width: 4rem;
height: 3rem;
}
percentage 百分⽐转换less代码
@num: 0.5;
div {
height: percentage(@num);
}
转换后的css代码
div {
height: 50%;
}
abs 绝对值
less代码
@num: -32px;
div {
height: abs(@num);
}
转换后的css代码
div {
height: 32px; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。