LESS flex布局和2x图方案

方案

// flex布局
.flex_func(@justify-content: flex-start, @align-items: center, @flex-direction: row, @flex-wrap: nowrap) {
    display: flex;
    justify-content: @justify-content;
    align-items: @align-items;
    flex-direction: @flex-direction;
    flex-wrap: @flex-wrap;
}


// 2x图 3x图
.bg-image(@url, @bs: auto, @br: no-repeat) {
    background-image: ~"url('@{url}@2x.png')";
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: ~"url('@{url}@3x.png')";
    }
    background-size: @bs;
    background-repeat: @br;
}

// 1px线条
.border-1px(@position: bottom, @color: #EAEAEA, @height: 1px, @ 100%) {
    position: relative;
    &::after {
        content: " ";
        display: block;
        position: absolute;
        @{position}: 0;
        left: 0;
         @width;
        height: @height;
        background-color: @color;
        transform: scaleY(0.5);
    }
}