Sass混合器

混合器的一个很好的用法是用于供应商前缀
创建混合器：@mixin someName {}
使用混合器：@include someNme
混合器可以带参数

---

参数不带值

//.scss
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

//.css
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

---

参数有默认值

//.scss
@mixin border-radius($radius:3px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.box{
    @include border-radius;
}
.box2{
    @include border-radius(50%); 
}

//.css
.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box2 {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

---

传多个参数

@mixin center($width,$height){}