Sass 高分辨率下 border 1px 美化 封裝， less大同小異

border 1px 美化

一般寫法 全邊框1px

@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;
  }
}

不同位置分析判斷 默認(rèn)全邊框

$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;
  }
}

頁面調(diào)用 @include border_1px(type, color)

• type 五種類型 默認(rèn) default 全邊框
• color 邊框顏色