Sass简单封装 高分辨率下 border 1px 美化

https://www.jianshu.com/p/91c...

一般写法全边框

@mixin border_1px($color: #dfe0e1 ) {
  position: relative;
  &::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $color;
    border-radius: 4px;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}

不同位置分析判断 默认全边框

$color: #bfbece;

position: relative;
@if $type == default {
  &::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $color;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
} @else if $type == top {
  &::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background: $color;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
} @else if $type == bottom {
  &::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background: $color;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
} @else if $type == left {
  &::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 200%;
    background: $color;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
} @else if $type == right {
  &::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 200%;
    background: $color;
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}

全功能混合封装

$gray: #bfbece;

@mixin border_1px($type: default, $color: $gray) {
  position: relative;
  &::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    @if $type == default {
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      border: 1px solid $color;
    } @else if $type == top {
      top: 0;
      left: 0;
      width: 200%;
      height: 1px;
      background: $color;
    } @else if $type == bottom {
      bottom: 0;
      left: 0;
      width: 200%;
      height: 1px;
      background: $color;
    } @else if $type == left {
      top: 0;
      left: 0;
      width: 1px;
      height: 200%;
      background: $color;
    } @else if $type == right {
      top: 0;
      right: 0;
      width: 1px;
      height: 200%;
      background: $color;
    }
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}

页面调用 @include border_1px(type, color)

• type 五种类型 默认 default 全边框
• color 边框颜色