// px 转成 rem。
// $property 属性
// $px-values 以 750 为宽的设计稿，量出来的尺寸，带单位 px
@mixin px2rem($property,$px-values,$baseline-px: 75px,$support-for-ie:false) {
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == 'number' {
    #{$property}: $px-values / $baseline-rem;
  }

  @else {
    //Create an empty list that we can dump values into
    $rem-values:();

    @each $value in $px-values {
      // If the value is zero or not a number, return it
      @if $value == 0 {
        $rem-values: append($rem-values, $value);
      }

      @else {
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}
// px 转成 rem。
// $property 属性
// $px-values 以 750 为宽的设计稿，量出来的尺寸，带单位 px
@mixin px2remImport($property,$px-values,$baseline-px: 75px,$support-for-ie:false) {
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == 'number' {
    #{$property}: $px-values / $baseline-rem !important;
  }

  @else {
    //Create an empty list that we can dump values into
    $rem-values:();

    @each $value in $px-values {
      // If the value is zero or not a number, return it
      @if $value == 0 {
        $rem-values: append($rem-values, $value);
      }

      @else {
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values !important;
  }
}
// Retina图片
// @include image-2x("logo2x.png", 100px, 25px);
@mixin image-2x($image, $width, $height) {
  @media (-moz-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}
// 设置字体， $font-size 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin font($font-size) {

  $size: $font-size / 2;

  font-size: $size;

  [data-dpr="2"] & {
    font-size: $size * 2;
  }

  [data-dpr="3"] & {
    font-size: $size * 3;
  }
}
// 设置字体， $font-size 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin fontImprot($font-size) {

  $size: $font-size / 2;

  font-size: $size !important;

  [data-dpr="2"] & {
    font-size: $size * 2 !important;
  }

  [data-dpr="3"] & {
    font-size: $size * 3 !important;
  }
}

// 设置宽， $width 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin width($psd-width) {

  $width: $psd-width / 2;

  width: $width;

  [data-dpr="2"] & {
    width: $width * 2;
  }

  [data-dpr="3"] & {
    width: $width * 3;
  }
}
// 设置宽， $width 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin radius($psd-size) {
  $size: $psd-size / 2;

  border-radius: $size;

  [data-dpr="2"] & {
    border-radius: $size * 2;
  }

  [data-dpr="3"] & {
    border-radius: $size * 3;
  }
}
// 设置宽， $top 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin top($psd-top) {

  $top: $psd-top / 2;

  top: $top;

  [data-dpr="2"] & {
    top: $top * 2;
  }

  [data-dpr="3"] & {
    top: $top * 3;
  }
}
// 设置宽， $left 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin left($psd-left) {

  $left: $psd-left / 2;

  left: $left;

  [data-dpr="2"] & {
    left: $left * 2;
  }

  [data-dpr="3"] & {
    left: $left * 3;
  }
}
// 设置宽， $left 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin paddingTop($psd-paddingTop) {

  $paddingTop: $psd-paddingTop / 2;

  padding-top: $paddingTop;

  [data-dpr="2"] & {
    padding-top: $paddingTop * 2;
  }

  [data-dpr="3"] & {
    padding-top: $paddingTop * 3;
  }
}
// 设置宽， $left 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin paddingBottom($psd-paddingBottom) {

  $paddingBottom: $psd-paddingBottom / 2;

  padding-bottom: $paddingBottom;

  [data-dpr="2"] & {
    padding-bottom: $paddingBottom * 2;
  }

  [data-dpr="3"] & {
    padding-bottom: $paddingBottom * 3;
  }
}
// 设置padding-left
@mixin paddingLeft($psd-paddingleft) {

  $paddingleft: $psd-paddingleft / 2;

  padding-left: $paddingleft;

  [data-dpr="2"] & {
    padding-left: $paddingleft * 2;
  }

  [data-dpr="3"] & {
    padding-left: $paddingleft * 3;
  }
}
// 设置padding-right
@mixin paddingRight($psd-paddingRight) {

  $paddingRight: $psd-paddingRight / 2;

  padding-right: $paddingRight;

  [data-dpr="2"] & {
    padding-right: $paddingRight * 2;
  }

  [data-dpr="3"] & {
    padding-right: $paddingRight * 3;
  }
}
// 设置marginTop
@mixin marginTop($psd-marginTop) {

  $marginTop: $psd-marginTop / 2;

  margin-top: $marginTop;

  [data-dpr="2"] & {
    margin-top: $marginTop * 2;
  }

  [data-dpr="3"] & {
    margin-top: $marginTop * 3;
  }
}
// 设置marginTop
@mixin marginBottom($psd-marginBottom) {

  $marginBottom: $psd-marginBottom / 2;

  margin-bottom: $marginBottom;

  [data-dpr="2"] & {
    margin-bottom: $marginBottom * 2;
  }

  [data-dpr="3"] & {
    margin-bottom: $marginBottom * 3;
  }
}
// 设置marginLeft
@mixin marginLeft($psd-marginLeft) {

  $marginLeft: $psd-marginLeft / 2;

  margin-left: $marginLeft;

  [data-dpr="2"] & {
    margin-left: $marginLeft * 2;
  }

  [data-dpr="3"] & {
    margin-left: $marginLeft * 3;
  }
}
// 设置高， $height 是以 750 为宽的设计稿，量出来的尺寸， 带单位 px
@mixin height($height-value: -1, $lineHeight-value: -1) {
  @if $height-value > -1 {
    $height: $height-value / 2;

    height: $height;

    [data-dpr="2"] & {
      height: $height * 2;
    }

    [data-dpr="3"] & {
      height: $height * 3;
    }
  }

  @if $lineHeight-value > -1 {
    $lineHeight: $lineHeight-value / 2;

    line-height: $lineHeight;

    [data-dpr="2"] & {
      line-height: $lineHeight * 2;
    }

    [data-dpr="3"] & {
      line-height: $lineHeight * 3;
    }
  }
}
// 设置边框
@mixin border-m($border-size, $color, $direction: all, $type: solid) {
  $size: $border-size / 2;

  @if $direction != 'all' {
    border-width: $size;

    [data-dpr="2"] & {
      border-width: $size * 2;
    }

    [data-dpr="3"] & {
      border-width: $size * 3;
    }

    @if $direction == 'left' {
      border-left-color: $color;
      border-left-style: $type;
    }

    @if $direction == 'right' {
      border-right-color: $color;
      border-right-style: $type;
    }

    @if $direction == 'top' {
      border-top-color: $color;
      border-top-style: $type;
    }

    @if $direction == 'bottom' {
      border-bottom-color: $color;
      border-bottom-style: $type;
    }
  }

  @else {
    border: $size $type $color;

    [data-dpr="2"] & {
      border: $size * 2 $type $color;
    }

    [data-dpr="3"] & {
      border: $size * 3 $type $color;
    }
  }
}