实现手机端1px边框的sass写法

由于dpr导致写的border:1px red solid;并不能在手机上实现真正的1像素。

通过伪类实现手机端一像素的代码：

@mixin border_bottom($color) {
  & {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 1px solid $color;
      transform-origin: 0 0;
      padding: 1px;
      box-sizing: border-box;
      pointer-events: none;
    }
    &:last-child:before {
      border-bottom:none;
    }
  }
  @media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
    &:before {
      width: 100%;
      height: 100%;
      transform: scale(1);
    }
  }
  @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
    &:before {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
    }
  }
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
    &:before {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
    }
  }
}

使用的时候：

   .li {
      width: 100px;
      min-height: 40px;
      @include border_bottom(#ff0000);
    }