移动端 vw 布局实现 1px 边框线的 scss mixin

[碎碎酱]

mixin 定义

$border-poses: top, right, bottom, left;
$border-color: #eee;
@mixin border-1px($color: $border-color, $poses: $border-poses) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        @each $pos in $poses {
            border-#{$pos}: 1px solid $color;
            #{$pos}: 0;
        }
        @if $poses == 'top' or $poses == 'bottom' {
            left: 0;
            right: 0;
            transform: scaleY(0.5);
        }
        @if $poses == 'left' or $poses == 'right' {
            top: 0;
            bottom: 0;
            transform: scaleX(0.5);
        }
    }
}

用法

<div class="need-1px-border">需要1px边框线的元素, 红色, 在下方</div>

.need-1px-border {
    @include border-1px(red, bottom);
}