stylus裏使用mixin實現1像素邊框

1、新建mixin文件 mixin.styl

border-1px($color)
  position relative
  &:after
    display block
    position absolute
    left 0
    bottom 0
    width 100%
    border-top: 1px solid $color
    content ''

2、進行縮放實現真正的1px

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px{
    &::after{
      -webkit-transform scaleY(.7)
      transform scaleY(.7)
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px{
    &::after{
      -webkit-transform scaleY(.5)
      transform scaleY(.5)
    }
  }
}

3、引入mixin.styl

@import './common/stylus/mixin.styl';

.tab{
    border-1px(rgba(7, 17, 27, 0.1));
}

個人博客：jilezhainanshe.com​​​​​​​