scss方法封装之-0.5px

目的

为了解决繁琐的设置边框0.5px问题，及提高样式编写效率

方法定义

/* ------0.5px样式------ */
$defaultBorderColor: #f2f4f5; //默认线条颜色
$defaultRadius: 0; // 默认圆角
$defaultDirection: bottom; // 默认位置
$defaultPostion: relative;

/* 单边0.5px */
@mixin single-line-scale(
  $borderColor: $defaultBorderColor,
  $direction: $defaultDirection,
  $positon: $defaultPostion
) {
  position: $positon;
  &::after {
    content: ' ';
    position: absolute;
    @if $direction == bottom {
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      transform: scaleY(0.5);
    } @else if $direction == top {
      width: 100%;
      height: 1px;
      top: 0;
      left: 0;
      transform: scaleY(0.5);
    } @else if $direction == left {
      width: 1px;
      height: 100%;
      left: 0;
      top: 0;
      transform: scaleX(0.5);
    } @else if $direction == right {
      width: 1px;
      height: 100%;
      right: 0;
      top: 0;
      transform: scaleX(0.5);
    }
    background: $borderColor;
  }
}

/* 四边0.5px */
@mixin round-line-scale($borderColor: $defaultBorderColors, $radius: $defaultRadius) {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid $borderColor;
    border-radius: $radius * 2;
    transform-origin: 0 0;
    transform: scale(0.5);
    pointer-events: none;
  }
}

pointer-events: none; 解决使用四边 0.5方法，点击失效问题

使用

.border-single-line{
   @include single-line-scale(rgba(0, 0, 0, 0.08), top);
}
.border-round-line{
   @include round-line-scale(#e03810, 16px)
}