sass混合器的使用

1、混合器

、@mixin 名字 {

        相同的css样式

}

通过@include 来引用  格式： @include 名字

带有参数的混合器

2、@mixin name($名字1，$名字2){

         color:$名字

}

引用：@include name("样式1","样式2") 

@mixin div {
    font-size: 10px;
    font-weight: 900;
}

// $red1:$color  把$color赋值给$red1
@mixin color($color, $border, $red1:$color) {
    color: $color;
    border: $border solid $red1;
    // background: $red1;
}

.div0 {
    // 混合选择器
    @include div;
    // 带有参数的选择器
    @include color(orange, 6px, blue)
}

.div1 {
    // 混合器选择器
    @include div;
    // 带有参数的选择器
    @include color(black, 1px, blue)
}

 3.继承的使用

@extend .名字；

.btn {
    width: 100px;
    height: 40px;
    border: 0px;
}

.button1 {
    color: red;
    @extend .btn;   
}

.button2 {
    color: blue;
    @extend .btn;
}

.button3 {
    color: green;
    @extend .btn;
}

占位符选择器 %;