Sass混合器实现样式的重用和使用选择器继承精简CSS

  混合器实现样式的重用

      如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

        混合器使用@mixin标识符定义。看上去很像其他的css @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

语法@mixin 混合器的名称{复用的代码}，和js的函数封装和调用相似。

通过@include 混合器名称 实现混合器的调用

/*混合器的定义：@mixin 混合器的名称{代码}*/
@mixin a_0 {
    color: aquamarine;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
}
nav {
    /*混合器的调用*/
    @include a_0;
    width:200px;
}

混合器携带参数

@mixin box-size($width, $height, $border-width) {
    width: $width;
    height: $height;
    border: $border-width solid red;
}
/*混合器携带参数，注意定义了几个调用时就写几