关于css:Sass简单封装-高分辨率下-border-1px-美化

32次阅读

共计 1828 个字符，预计需要花费 5 分钟才能阅读完成。

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)