//是否支持某个浏览器的前缀，如果你不想支持，可以设置为false
//----------------------------
$prefix-for-webkit: true !default;
$prefix-for-mozilla: false !default;
$prefix-for-microsoft: false !default;
$prefix-for-opera: false !default;
$prefix-for-spec: true !default; // 标准版

// prefixer
//----------------------------
@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {

    @if $prefix == webkit and $prefix-for-webkit == true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix == moz and $prefix-for-mozilla == true {
      -moz-#{$property}: $value;
    }
    @else if $prefix == ms and $prefix-for-microsoft == true {
      -ms-#{$property}: $value;
    }
    @else if $prefix == o and $prefix-for-opera == true {
      -o-#{$property}: $value;
    }
    @else if $prefix == spec and $prefix-for-spec == true {
      #{$property}: $value;
    }
    @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}
@mixin skewX($degrees) {
  @include prefixer(transform, skewX($degrees), webkit moz o ms spec);
  -webkit-backface-visibility: hidden;
}
//webki和标准
@mixin box-shadow($shadow...) {
    @include prefixer(box-shadow, $shadow, webkit spec);
}

//webkit moz 和标准
@mixin box-sizing($type:border-box) {
  // border-box | padding-box | content-box
  @include prefixer(box-sizing, $type, webkit moz spec);
}

//webkit moz o 和标准
@mixin transform($property...) {
  @include prefixer(transform, $property, webkit moz o spec);
}

// triangle
@mixin triangle($direction, $size, $borderColor ) {
  content:"";
  height: 0;
  width: 0;

  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } 
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}

//定义media-queries的最小最大宽度
@mixin screen($res-min, $res-max){
  @media screen and ( min-width: $res-min ) and ( max-width: $res-max ){
    @content;
  }
}

//定义animation的keyframes
@mixin keyframes($name){
    @keyframes #{$name} {
      @content;
    }
}

//定义所有不支持圆角的浏览器使用背景图片
//得使用[modernizr](http://modernizr.com/)来检测，在html上加class
@mixin no-border-radius{
    .no-border-radius{
        @content
    }
}

@mixin borderbottom1px($color){
	&{
		position: relative;
	}
	&:after{
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: $color;
	}
}
@mixin bordertop1px($color){
	&{
		position: relative;
	}
	&:before{
		position: absolute;
		right: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: $color;
		top: -1px;
	}
}

@mixin border1px($color){
	& {
	    position: relative;
	}

	&:before {
	    content: '';
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    border: 1px solid;
	    border-color:$color;
	    -webkit-transform-origin: 0 0;
	    -moz-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	    -o-transform-origin: 0 0;
	    transform-origin: 0 0;
	    -webkit-transform: scale(0.5, 0.5);
	    -ms-transform: scale(0.5, 0.5);
	    -o-transform: scale(0.5, 0.5);
	    transform: scale(0.5, 0.5);
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    left:50%;
	    @include prefixer(transform,translateX(-50%),(webkit,spec));
	}
}

@mixin fn-wrap(){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin font-dpr($font-size){
    font-size: $font-size;

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

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
// @mixin px2rem($property,$px-values,$baseline-px:124px,$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 or type-of($value) != "number"{
//                 $rem-values: append($rem-values, $value / $baseline-rem);
//             }
//         }
//         // Return the property and its list of converted values
//         #{$property}: $rem-values;
//     }
// }
@function px2rem($px, $base-font-size:75px) {
  @if (unitless($px)) {
      @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
      @return px2rem($px + 0px); // That may fail.
  }
  @else if (unit($px)==rem) {
      @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}
@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}