8-混合宏

在你的网站假如有几处小样式类似，比如颜色、字体，这时候可以统一处理:

一、声明混合宏（@mixin）

• 不带参数混合宏：

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

• 带参数

@mixin border-raduis($raduis) {
    -webkit-border-raduis:$raduis;
    border-radius:$raduis;
}

• 复杂的混合宏

@mixin border-raduis($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);
    }
}

当$shadow的参数数量值大于或者等于1时候，表示有多个阴影值，反之调用默认的参数值0 0 4px rgba(0, 0, 0, .3);
如果混合宏带有多个参数的时候可以用“...”来代替。
二、调用混合宏（@include）

button {
  @include border-raduis;
}

编译出来的css：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

三、1.混合宏的参数----传一个不带值的参数
定义：

@mixin border-raduis($raduis) {
    -webkit-border-raduis:$raduis;
    border-radius: $raduis;
}

调用：

.box {
    &.box1 {
        width: $width;
        height: $height;
        border: {
            top: 1px solid red;
            bottom: 1px solid blue;
            left:1px solid #000;
            right:1px solid pink;   
            @include border-raduis(10px)  //报错
        }
        @include border-raduis(10px)
    } 
}

编译出来的css：

.box.box1 {
  width: 300px;
  height: 300px;
  border-top: 1px solid red;
  border-bottom: 1px solid blue;
  border-left: 1px solid #000;
  border-right: 1px solid pink;
  -webkit-border-raduis: 10px;
  border-radius: 10px;
}

2.混合宏---传一个带有默认值的参数
定义：

@mixin border-raduis($raduis:3px) {
    -webkit-border-raduis:$raduis;
    border-radius: $raduis;
}
.btn_1{
  @include border-raduis;
}

这个时候假如你页面中很多地方的圆角都是3px，直接调用这个有默认值的混合宏就可以了。
但有的时候，页面中圆角有些元素的圆角值不一样，那么可以给混合宏传值

@mixin border-raduis($raduis:3px) {
    -webkit-border-raduis:$raduis;
    border-radius: $raduis;
}
.btn_2{
  @include border-raduis(50%);
}

这个时候.btn_2对应的圆角就是50%；
3.混合宏的参数---传多个参数

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

调用：

.box-center {
  @include center(300px,500px);
}

有一个特别的参数...，当混合宏传的参数过多的时候，可以使用参数太替代，如：

@mixin box-shadow($shadow...){
    @if length($shadow) >= 1 {
        -webkit-box-shadow:$shadow;
        box-shadow: $shadow;
    }
    @else {
        $shadow:0 0 2px rgba(#000,.25);
        -webkit-box-shadow:$shadow;
        box-shadow: $shadow;
    }
}

实际调用中：

.box {
    &.box1 {
        @include box-shadow(0 0 1px rgba(#000,0.5),0 0 2px rgba(#000,0.2))
    }
}

编译后的css：

.box.box1 {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

如果一个参数都不传走else部分

.box.box1 {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

在实际编码中混合宏给我们带来很大方便之处，特别是对于复用重复代码块，但是其实也有一个不足之处，就是会生成冗余的代码块。比如在不同地方调用相同的混合宏

.box {
    @include border-radius;
  }
.btn {
    @include border-raduis;
}  

编译后的css：

.box {
  -webkit-border-raduis: 5px;
  border-radius: 5px;
}
.btn {
  -webkit-border-raduis: 5px;
  border-radius: 5px;
}

它并不能将相同的代码合并在一起