Stylusnebula 2019-08-31
移动端通用mixins stylus版
基础配置
$green = #02a774; $yellow = #F5A100; $bc = #e4e4e4; // 一像素下边框 bottom-border-1px($color) position relative border none &:after content '' position absolute left 0 bottom 0 width 100% height 1px background-color $color transform scaleY(0.5) //一像素上边框 top-border-1px($color) position &::before content '' position absolute z-index 200 left 0 top 0 width 100% height 1px background-color $color //根据像素比缩放1px 像素边框 @media only screen and (-webkit-device-pixel-ratio: 2) .border-1px &::before transform scaleY(.5) @media only screen and (-webkit-device-pixel-ratio: 3) .border-1px &::before transform scaleY(.333333) //根据像素比来使用2x图 3x图 bg-image($url) background-image: url($url + "@2x.png") @media (-webkit-min-device-ratio: 3),(min-device-pixel-ratio: 3) background-image: url($url + "@3x.png") // 清除浮动 clearFix() *zoom 1 &::after content '' display block clear both