在mixin.stylus中定义公共函数
1 border-1px($color) 2 position: relative 3 &:after 4 display: block 5 position: absolute 6 left: 0 7 bottom: 0 8 width: 100% 9 border-top: 1px solid $color 10 content: ''
在base.stylus中定义不同dpi设备下的缩放比例
1 @media (-webkit-min-device-pixel-ratio:1.5) , (min-device-pixel-ratio:1.5) 2 .border-1px 3 &::after 4 -webkit-transform: scaleY(0.7) 5 transform: scaleY(0.7) 6 @media (-webkit-min-device-pixel-ratio:2) , (min-device-pixel-ratio:2) 7 .border-1px 8 &::after 9 -webkit-transform: scaleY(0.5) 10 transform: scaleY(0.5)
在vue组件中使用border-1px函数
1 @import '~common/stylus/mixin.styl'; 2 .tab 3 display: flex 4 width: 100% 5 height: 40px 6 line-height 40px 7 border-1px(rgba(7,17,27,0.1)) 8 .tab-item 9 flex-grow: 1 10 text-align: center