// 背景图片地址和大小
@mixin bis($url, $r, $w:100%, $h:100%) {
    background-image: url($url);
    background-repeat: $r;
    background-size: $w $h;
    -moz-background-size: $w $h;
  }
  
  
  //左到右渐变
  @mixin bglrgradient($f1,$f2,$c1, $c2) {
    background: -moz-linear-gradient($f2,$c1, $c2);
    background: -webkit-gradient(linear, $f1, $f2, $c1, $c2);
    background: -webkit-linear-gradient($f2, $c1, $c2);
    background: -o-linear-gradient($f2, $c1, $c2);
    background: -ms-linear-gradient($f2, $c1, $c2);
    background: linear-gradient(to $f2,$c1, $c2);
  }
  
  //渐变
  @mixin lineargradient($regtl, $rettr, $regbr, $regbl, $tlp, $trp, $brp, $blp, $c, $r, $w:100%, $h:100%) {
    background: linear-gradient($regtl, transparent $tlp, $c 0) top left, linear-gradient($rettr, transparent $trp, $c 0) top right, linear-gradient($regbr, transparent $brp, $c 0) bottom right, linear-gradient($regbl, transparent $blp, $c 0) bottom left;
    background: -webkit-linear-gradient($regtl, transparent $tlp, $c 0) top left, -webkit-linear-gradient($rettr, transparent $trp, $c 0) top right, -webkit-linear-gradient($regbr, transparent $brp, $c 0) bottom right, -webkit-linear-gradient($regbl, transparent $blp, $c 0) bottom left;
    background: -o-linear-gradient($regtl, transparent $tlp, $c 0) top left, -o-linear-gradient($rettr, transparent $trp, $c 0) top right, -o-linear-gradient($regbr, transparent $brp, $c 0) bottom right, -o-linear-gradient($regbl, transparent $blp, $c 0) bottom left;
    background: -ms-linear-gradient($regtl, transparent $tlp, $c 0) top left, -ms-linear-gradient($rettr, transparent $trp, $c 0) top right, -ms-linear-gradient($regbr, transparent $brp, $c 0) bottom right, -ms-linear-gradient($regbl, transparent $blp, $c 0) bottom left;
    background: -moz-linear-gradient($regtl, transparent $tlp, $c 0) top left, -moz-linear-gradient($rettr, transparent $trp, $c 0) top right, -moz-linear-gradient($regbr, transparent $brp, $c 0) bottom right, -moz-linear-gradient($regbl, transparent $blp, $c 0) bottom left;
    background-size: $w $h;
    background-repeat: $r;
  }

  // 径向渐变
  @mixin radialgradient($ctr, $p1, $edge, $p2){
    background: -webkit-radial-gradient($ctr $p1, $edge $p2); 
    background: -o-radial-gradient($ctr $p1, $edge $p2);
    background: -moz-radial-gradient($ctr $p1, $edge $p2);
    background: radial-gradient($ctr $p1, $edge $p2);
  }

  // 径向渐变球体
  // @mixin radialgradient($circle, $at, $ctr, $p1, $p2, $p3){
  //   background: -webkit-radial-gradient($circle $at $ctr $p1, $p2, $p3); 
  //   background: -o-radial-gradient($circle $at $ctr $p1, $p2, $p3);
  //   background: -moz-radial-gradient($circle $at $ctr $p1, $p2, $p3);
  //   background: radial-gradient($circle $at $ctr $p1, $p2, $p3);
  // }
  
  // 边角
  @mixin borderRadius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
  }
  @mixin borderRadiu($t,$r,$b,$l) {
    -webkit-border-radius: $t $r $b $l;
    -moz-border-radius:  $t $r $b $l;
    -ms-border-radius:  $t $r $b $l;
    -o-border-radius:  $t $r $b $l;
    border-radius:  $t $r $b $l;
  }
  
  //定位全屏
  @mixin allcover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
   
  }
  
  //定位上下左右居中
  @mixin center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  //定位上下居中
  @mixin ct {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  //定位左右居中
  @mixin cl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  //宽高
  @mixin wh($width, $height) {
    width: $width;
    height: $height;
  }
  
  //字体大小、行高、字体
  @mixin font($size, $line-height, $family: 'Microsoft YaHei') {
    font: #{$size}/#{$line-height} $family;
  }
  
  //字体大小，颜色
  @mixin sc($size, $color) {
    font-size: $size;
    color: $color;
  }
  
  //flex 布局和 子元素 对其方式
  @mixin fx() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  
  }
  
  //flex 
  @mixin flex($f) {
    -webkit-flex: $f;
    -ms-flex: $f;
    flex: $f;
    -webkit-box-flex: $f;
    -moz-box-flex: $f;
  }
  
  //flex-grow
  @mixin flexgrow($f) {
    -webkit-flex-grow: $f;
    -ms-flex-grow: $f;
    flex-grow: 1;
    -webkit-box-flex-grow: $f;
    -moz-box-flex-grow: $f;
  }
  
  
  //阴影
  @mixin shadow($x, $y, $w, $c) {
    -webkit-box-shadow: $x $y $w $c;
    -moz-box-shadow: $x $y $w $c;
    box-shadow: $x $y $w $c;
  }
  
  @mixin shadow-inset($x, $y, $w, $c) {
    -webkit-box-shadow: $x $y $w $c inset;
    -moz-box-shadow: $x $y $w $c inset;
    box-shadow: $x $y $w $c inset;
  }
  
  //旋转
  @mixin transform($reg) {
    -webkit-transform: skew($reg);
    -moz-transform: skew($reg);
    -ms-transform: skew($reg);
    -o-transform: skew($reg);
    transform: skew($reg);
  }
  
  @mixin transformrotate($reg) {
    -webkit-transform: rotate($reg);
    -moz-transform: rotate($reg);
    -ms-transform: rotate($reg);
    -o-transform: rotate($reg);
    transform: rotate($reg);
  }

  @mixin transformrotateY($reg) {
    -webkit-transform: rotateY($reg);
    -moz-transform: rotateY($reg);
    -ms-transform: rotateY($reg);
    -o-transform: rotateY($reg);
    transform: rotateY($reg);
  }
  
  @mixin transformrotateZ($reg, $s, $to) {
    -webkit-transform: rotateZ($reg) scale($s);
    -moz-transform: rotateZ($reg) scale($s);
    -ms-transform: rotateZ($reg) scale($s);
    -o-transform: rotateZ($reg) scale($s);
    transform: rotateZ($reg) scale($s);
    transform-origin: $to;
    -ms-transform-origin: $to;
    -moz-transform-origin: $to;
    -webkit-transform-origin: $to;
    -o-transform-origin: $to;
  }
  
  @mixin transformtranslate($reg,$red) {
    -webkit-transform: translate($reg,$red);
    -moz-transform: translate($reg,$red);
    -ms-transform: translate($reg,$red);
    -o-transform: translate($reg,$red);
    transform: translate($reg,$red);
  }
  
  @mixin transformX($reg) {
    -webkit-transform: translateX($reg);
    -moz-transform: translateX($reg);
    -ms-transform: translateX($reg);
    -o-transform: translateX($reg);
    transform: translateX($reg);
  }
  
  @mixin transformY($reg) {
    -webkit-transform: translateY($reg);
    -moz-transform: translateY($reg);
    -ms-transform: translateY($reg);
    -o-transform: translateY($reg);
    transform: translateY($reg);
  }

  @mixin transformZ($reg) {
    -webkit-transform: translateZ($reg);
    -moz-transform: translateZ($reg);
    -ms-transform: translateZ($reg);
    -o-transform: translateZ($reg);
    transform: translateZ($reg);
  }
  
  @mixin transformscale($n) {
    transform: scale($n);
    -ms-transform:scale($n);     
    -moz-transform:scale($n);     
    -webkit-transform:scale($n); 
    -o-transform:scale($n);
  }
  
  @mixin box-sizing() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  // 透明度
  @mixin opacity($v,$b) {
    opacity:$v;
　　filter:alpha(opacity=$b);
  }

  // keyframes动画
  @mixin keyframes($keyname) {
    @-webkit-keyframes #{$keyname} {
      @content;
    }
    @-moz-keyframes #{$keyname} {
      @content;
    }
    @keyframes #{$keyname} {
      @content;
    }
  }

  //  keyframes动画规则
  @mixin animation($keyname,$keyeff,$keytime,$keyinf,$keydelay,$keymode) {
    animation:$keyname $keyeff $keytime $keyinf;
    -moz-animation:$keyname $keyeff $keytime $keyinf;
    -webkit-animation:$keyname $keyeff $keytime $keyinf;
    -o-animation:$keyname $keyeff $keytime $keyinf;
    animation-delay:$keydelay;
    -webkit-animation-delay:$keydelay;
    -webkit-animation-fill-mode: $keymode;
    animation-fill-mode :$keymode;
  }

  // transition动画
  @mixin transition($width,$time) {
    -moz-transition: $width $time; 
    -webkit-transition: $width $time; 
    -o-transition: $width $time; 
  }


  // 3D

  @mixin transform3D($p1, $p2, $p3, $p4, $p5, $p6) {
    -ms-transform: translate3D($p1,$p2,$p3) rotateX($p4) rotateY($p5) rotateZ($p6);
    -webkit-transform: translate3D($p1,$p2,$p3) rotateX($p4) rotateY($p5) rotateZ($p6);
    -o-transform: translate3D($p1,$p2,$p3) rotateX($p4) rotateY($p5) rotateZ($p6);
    -moz-transform: translate3D($p1,$p2,$p3) rotateX($p4) rotateY($p5) rotateZ($p6);
  }

  