混合器的一个很好的用法是用于供应商前缀
创建混合器:@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){}
网友评论