【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;
}