标签移动端下的文章

admin 发布于 09月09, 2019

移动端1px的scss版本

基于antd-mobile的less代码改造而成:

$border-color-base: #ddd;

@mixin scale-hairline-common($color, $top, $right, $bottom, $left){
  content: '';
  position: absolute;
  background-color: $color;
  display: block;
  z-index: 1;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin hairline($direction, $color: $border-color-base, $radius: 0) {
  @if ($direction == 'top') {
    border-top: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-top: none;

        &::before {
          @include scale-hairline-common($color, 0, auto, auto, 0);
          width: 100%;
          height: 1PX;
          transform-origin: 50% 50%;
          transform: scaleY(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'right') {
    border-right: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-right: none;

        &::after {
          @include scale-hairline-common($color, 0, 0, auto, auto);
          width: 1PX;
          height: 100%;
          background: $color;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'bottom') {
    border-bottom: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-bottom: none;

        &::after {
          @include scale-hairline-common($color, auto, auto, 0, 0);
          width: 100%;
          height: 1PX;
          transform-origin: 50% 100%;
          transform: scaleY(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'left') {
    border-left: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-left: none;

        &::before {
          @include scale-hairline-common($color, 0, auto, auto, 0);
          width: 1PX;
          height: 100%;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'all') {
    border: 1PX solid $color;
    border-radius: $radius;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border: none;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          border: 1PX solid $color;
          border-radius: $radius * 2;
          transform-origin: 0 0;
          transform: scale(0.5);
          box-sizing: border-box;
          pointer-events: none;

          // @media (min-resolution: 3dppx) {
          //   width: 300%;
          //   height: 300%;
          //   border-radius: $radius * 3;
          //   transform: scale(0.33);
          // }
        }
      }
    }
  }
}

阅读全文 »