less 常用方法（持续更新）

unit 单位转换

在less中，用unit来重置单位，是非常实用的

// less
@num: 10px
div {
  height：unit(@num, rem)
}
// 转换成css
div {
  height：10rem;
}

这个地方用了unit，把设置好的变量@num的10px，变成 10rem。需要注意的是，rem是不用单引号或者双引号括起来的。如果unit第二个值是空，则会穿换成不带单位的。

单位的灵活转换

你还可以写一个统一的内部通过计算，进行单位的灵活转换 ，~波浪线除了动态路径的作用，还有延迟计算的作用，也就是告诉less先不要计算结果，到了用户浏览器再由实际浏览器进行计算。

/**
* px转rem
*@px：待转换的值
*@width：宽度参数默认是 100px
* 示例：.px2rem(300px)[@rem];
*/
@default-w: 100px;
.px2rem(@px, @width:@default-w) {
  @var: unit(@px / @width);
  @rem:~'@{var}rem';
}

ceil 向上取整

// less
@num：3.3px;
div {
  height: unit(ceil(@num), rem);
}
// css

div {
  height: 4rem;
}

floor 向下取整

div {
  height: 3rem;
}

round 四舍五入

div {
  height: 3rem;
}

percentage 百分比转换

@num: 0.5;
// less
div {
  height: percentage(@num);
}
//css 
div {
  height：50%;
}

abs 绝对值

@num: -30px;
//less
div {
  height: abs(@num);
}
// css
div {
  height: 30px;
}

~路径

当我们配置了 webpack 的 @ 替代时，就可以这么使用：

background-image: url('~@/assets/images/map.png')
// 他会去寻找 src/assets/images/map.png