记录移动端开发1像素边框问题-stylus代码转成less

需求：

需要解决 1 像素问题:

物理像素是设备像素的 2 倍，在手机上预览，1px 边框会变成 2px

参考 cube-ui 的 mixin.styl 中 1 像素解决方案，如下：

border-1px($color = #ccc, $radius = 2PX, $style = solid)
  position: relative
  &::after
    content: ""
    pointer-events: none
    display: block
    position: absolute
    left: 0
    top: 0
    transform-origin: 0 0
    border: 1PX $style $color
    border-radius: $radius
    box-sizing border-box
    width 100%
    height 100%
    @media (min-resolution: 2dppx)
      width: 200%
      height: 200%
      border-radius: $radius * 2
      transform: scale(.5)
    @media (min-resolution: 3dppx)
      width: 300%
      height: 300%
      border-radius: $radius * 3
      transform: scale(.333)

问题：

我们的项目中所有样式文件都是用 less 写的，而且就用一个 mixin.styl 中的这个方法而已

解决：

改成 less 语法，对照 less 官方文档，写入 mixin.less 文件，引用
除了语法的不同，变量定义、方法的调用外，改了一处

 // 原来：border: 1PX $style $color

 // 改成：我只需要下边框
 border-bottom: 1PX @style @color;

改后代码如下：

.border-1px(@color: #ccc, @radius: 2PX, @style: solid){
  position: relative;
  &::after {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-bottom: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media (min-resolution: 2dppx){
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media (min-resolution: 3dppx){
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.333);
    }
  }
}

使用：

@import "../../assets/style/mixin.less";

li {.border-1px(#E1E1E1);
}

在手机上预览，已经发生变化：

修改前:

修改后:

问题解决，下班走人！