移动端如何使用sass 定义一个0.5px 线条组件

一.熟悉sass的混入 @mixin 与 @include

1. @mixin 定义一个混入 ，混入可以接收参数 ，可以向混入传递变量

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

2. @include 调用混用，并传递两个参数

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}
.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}
// 将以上代码转化位css,如下:
.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

二. 定义boderline组件

1. 定义 @mixin 混入 传入两个变量 ，位置 及 颜色

@mixin borderline($position, $color: $borderline-color) {
  // 定义边框对应伪元素
  $posMap: (top: before, left: before, right: after, bottom: after);
  $pos: map-get($posMap, $position);

  & {
    position: relative;

    &:#{$pos} {
      content: '';
      position: absolute;
      z-index: 1;

      @if ($position == top or $position == bottom) {
        left: -50%;
        right: -50%;
        height: 1PX;

        @if $position == top {
          top: 0;
          bottom: auto;
        } @else {
          top: auto;
          bottom: 0;
        }
      } @else if $position == left or $position == right {
        top: -50%;
        bottom: -50%;
        width: 1PX;

        @if $position == left {
          left: 0;
          right: auto;
        } @else {
          left: auto;
          right: 0;
        }
      }
      transform-origin: 50% 50%;
      background-color: $color;
      transform: scale(0.5);
    }
  }
}

2. 定义好之后就可以@include 使用了，如下代码所示:

// 定义一条底部的红色边框
& {
      @include borderline(bottom, red)
    }
// 定义一条左边的绿色边框
 & {
      @include borderline(left, green)
    }