sass混合器

我们在使用sass的时候有很多时候有许多同样的代码，这就导致会重复写很多同样的代码，导致样式会很多，这个时候就出现了混合器就可以把很多公用的代码放在一个混合器里

// 定义一个混合器
@mixin div {
    font-size: 28px;
    font-family: "楷体";
    text-decoration: none;
}

@mixin是关键字，后面跟着混合器的名称，里面就放入一些共用的代码，那么混合器写好了，要如何使用呢？

        

.nav {
    a {
       
        @include div;
    }
}

只需要在要使用的地方用@include这个关键字 后面加上混合器名称就可以使用了，是不是很简单，还减去了要写很多样式的工作量，，来个小项目吧。

 用混合器实现这个效果，首先想想这几个按钮相同的地方是什么？  是不是按钮的大小和形状，只是里面的颜色不相同，那么就可以用到sass混合器，首先写上html的代码：

@mixin btn {
    width: 100px;
    height: 40px;
    border-radius: 10px;
}

.btn-default {
    @include btn;
    background-color: grey;
    border: 1px solid gray;
    color: gray;
}

.btn-danger {
    @include btn;
    background-color: rgb(165, 99, 99);
    color: red;
    border: 1px solid red;
}

.btn-waring {
    @include btn;
    background-color: yellowgreen;
    color: yellow;
    border: 1px solid yellow;
}

.btn-succse {
    @include btn;
    background-color: greenyellow;
    color: green;
    border: 1px solid green;
}

将按钮的大体样式放在混合器中，然后在设置各个按钮的不一样的地方，在引入混合器就完成了。

有没有一种方法就是将只需要写入属性值就可以使用的？

        在混合器中，还有一种是带参数的，就需要在创建混合器是定义变量，然后按照变量的顺序来写入参数：

        

@mixin div {
    width: 100px;
    height: 40px;
    text-align: center;
    border-radius: 20px;
    line-height: 40px;
}

// 设置默认值时要让他在最后面,否则会报错
@mixin color($baColor, $color, $border_style, $width) {
    background-color: $baColor;
    color: $color;
    border: $width $border_style $color;
}

// 在填写参数时,要按照设置形参(变量)的时候按照顺序填写
.btn-default {
    @include color(red, black,soild,1px);
    @include div;
}

.btn-danger {
    background-color: red;
    color: white;
    border: 1px solid black;
    @include div;
}

.btn-succse {
    background-color: green;
    color: white;
    border: 1px solid black;
    @include div;
}

.btn-info {
    background-color: yellow;
    color: black;
    border: 1px solid black;
    @include div;
}

向上面那样在使用的时候就可以直接写参数，就可以改变样式。