移动端通用mixins-stylus版

移动端通用 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