Sass-混合宏 VS 继承 VS 占位符 混合宏

混合宏

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。@mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。

不带参数混合宏

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

带参数混合宏 

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

@mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。

// 声明
@mixin border-radius{
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

// 调用
button{
    @include border-radius;
}

Sass 的混合宏有一个强大的功能，可以传参，那么在 Sass 中传参主要有以下几种情形：

1、传一个不带值的参数

@mixin border-radius($radius){
    border-radius:$radius;
}
// 即在调用时给参数一个值
button{
    @include border-radius(3px);
}

 2、传一个带值的参数

@mixin border-radius($radius:5px){
    border-radius: $radius;
}

button{
    @include border-radius;
}

.btn{
    @include border-radius(50%);        //此时圆角值是50%，不会因为默认的5px受影响
}

在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“5px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”，但是在需要其他圆角值时候直接给参数就可以了。

3、传多个参数

@mixin content($width,$height){
    width:$width;
    height:$height;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-($width)/2;
    margin-top:-($height)/2;
}

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

其中，有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代 

@mixin box-shadow($shadow...){
    @if length($shadow) >= 1{
        @include prefixer(box-shadow,$shadow);
    }@else{
        $shadow:0 0 4px rgba(0,0,0,0.3);
        @include prefixer(box-shadow,$shadow);
    }
}
// 调用
.box {
    @include box-shadow(0 0 1px rgba(#000,0.5),0 0 2px rgba(#000,0.2));
}

 继承

在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词  “@extend” 来继承已存在的类样式块，从而实现代码的继承。

.btn{       //基类
    font-size : 16px;
    color : red;
}
.btn-primary{
    padding : 20px 10px;
    margin : 10px 20px;
    @extend .btn;
}
.btn-danger{
    border : 1px solid blue;
    background-color : yellow;
    @extend .btn-primary;
}

以上代码中 .btn 代码块就是基类，下面选择器都有继承这部分，它编译出来的css：

.btn, .btn-primary, .btn-danger {       //继承的代码会自动合并
    font-size: 16px;
    color: red;
  }
  
  .btn-primary, .btn-danger {
    padding: 20px 10px;
    margin: 10px 20px;
  }
  
  .btn-danger {
    border: 1px solid blue;
    background-color: yellow;
  }

占位符

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。它可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

%mt5{
    margin-top : 5px;
}
%pl3{
    padding-left : 3px;
}
.box{
    @extend %mt5;
    @extend %pl3;
}
.content{
    @extend %mt5;
    @extend %pl3;
}
.p1{
    @extend %mt5;
}

编译出来的css：

.p1, .content, .box {
    margin-top: 5px;
}

.content, .box {
    padding-left: 3px;
}

可见，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

总结

混合宏 VS 继承 VS 占位符

混合宏
声明方式：@mixin        调用方式：@include
编译出来的 CSS 显示，它不会自动合并相同的样式代码，
如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。
使用场景：
如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

继承
声明方式：class         调用方式：@extend
使用继承后，编译出来的 CSS 代码块合并到一起，通过组合选择器的方式向大家展现。
这样编译出来的代码相对于混合宏来说要干净的多。但是他不能传变量参数
使用场景：
如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

占位符
声明方式：%placeholder  调用方式：@extend
占位符和继承的主要区别的：
1占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；
2继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。