混合器和继承选择器

混合器使用语法@mixin标示符定义，需要大量重用代码，或重复使用代码，时使用，能够解决代码重用的问题，提高代码的复用性，（使用场景：把复用性高的代码放到里面，便于复用）

调用：通过@include调用

<style>
    /*混合器*/
    @mixin border-radius {
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        
    }
    .button{
        list-style: none;
        background-color: pink;
        color: white;
        /*混合器的调用*/
        @include border-radius;
    }
</style>

应用场景比较多时：一组多个属性放到一个单元

他包含了css规则的最终样式

混合器规则（他可以包含标签选择器） 

传参

 混合器传参

@mixin color($normal,$hover,$visited){
    color:$normal;
    &:hover{
        color:$hover;
    }
    &:visited{
        color:$visited;
    }
}
a{
    @include color(red,green,blue)
}
/*按照顺序写，如果不按照顺序的话，要在实际参数前加上形参的名字*/
a{
    @include color($hover:green,$visited:blue,$normal:red)
}
/*混合器传参 key：value可以设置默认值*/
@mixin color($normal,$hover:$normal,$visited:$normal){
    color:$normal;
    &:hover{
        color:$hover;
    }
    &:visited{
        color:$visited;
    }
}
/*设置默认值的时候只用传默认值的参数就可以了*/
a{
    @include color(red)
}

选择器的继承

一个选择器继承另一个选择器的样式，使用@extend来实现它（把共有的属性抽离出来，然后让其余有需要这个样式的选择器去继承这个共有的选择器，两个，甚至多个选择器共有的属性，选择器独有的属性单独显示出来

<style>
    .div{
        width:100%;
        height:40px;
    }    
    .group{
        background-color:pink;
        @extend .div;
    }
</style>

继承的高级用法（继承一个html元素的样式）

.inherit{
    background-color: plum;
    @extend a;
}
/*.inherit继承a标签的所有样式*/

继承生成的代码比混合选择器要少（继承增加的是选择器而不是属性）

混合选择器不会层叠规则所以不会引起权重问题

不能使用后代选择器去继承css规则，可以用选择器去继承后代选择器