scss 初学笔记 二 混合宏

混合宏

格式  @mixin 定义混合宏 （相当于变量声明 var  $ ?）

//不带参数混合宏
@mixin borderRadius{
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

//带参数混合宏
@mixin  borderRadius($border-radius: 5px){
 -webkit-border-radius: $border-radius;
 border-radius: $border-radius;
}
 @include borderRadius(40px)  之前有默认参数 还可以传参

//复杂混合宏 @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }

//传一个不带值得参数
@minix border-radius ($radius){
    -webkit-border-radius:$radius;
    border-radius:$radius;
}
@include border-radius(3px);

调用混合宏

@mixin border-radius{
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

div{
 @include border-radius;
}

混合宏的问题：不能讲相同的样式进行合并