scss 的一些mixin

_mixin.scss

@mixin placeholder($fontSize: 16px, $color: rgba(153,153,153,0.54)) {
  &::-webkit-input-placeholder{
    color: $color;
  }
  &:-moz-placeholder {
    color: $color;
  }
  &::-moz-placeholder {
    color: $color;
  }
  &::-ms-input-placeholder {
    color: $color;
  }
}

@mixin border ($direction) {
  content: '';
  position: absolute;
  @if $direction == 'left' {
    border-left: 1px solid #e6e6e6;
    top: 0;
    left: 0;
    height: 100%;
    transform-origin: 0 0;
  } @else if $direction == 'bottom' {
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    left: 0;
    bottom: 0;
    transform-origin: 0 bottom;
  } @else if $direction == 'top' {
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    left: 0;
    top: 0;
    transform-origin: 0 bottom;
  }
  
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    @if $direction == 'left' {
      height: 200%;
    } @else {
      width: 200%;
    }
    transform: scale(.5);
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    @if $direction == 'left' {
      height: 300%;
    } @else {
      width: 300%;
    }
    transform: scale(.33);
  }
}
// 小三角
@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;
  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }
  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }
  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}