文章目录

a) Sass 中的混合宏使用 @mixin

@mixin mt($var){
  margin-top: $var;
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

编译后css效果

.block {
  margin-top: 5px; }
  .block span {
    display: block;
    margin-top: 5px; }

.header {
  color: orange;
  margin-top: 5px; }
  .header span {
    display: block;
    margin-top: 5px; }

总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码(有四个margin-top:5px)，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

缺点：代码冗余；
有点：可以传递变量；

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

b) Sass 中继承@extend

.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

编译后css效果

.mt, .block, .block span, .header, .header span {
  margin-top: 5px; }

.block span {
  display: block; }

.header {
  color: orange; }
  .header span {
    display: block; }

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。

缺点：相对于占位符多了一个基类 .mt,是没有想用到的；
优点：编译出来的代码比混合宏@mixin精简；

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

c) 占位符@extend 继承 %

%mt{
  margin-top: 5px;
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}

编译后css效果

.block, .block span, .header, .header span {
  margin-top: 5px; }

.block span {
  display: block; }

.header {
  color: orange; }
  .header span {
    display: block; }

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

优点：代码比@mixin精简，也没有继承的无用基类；
缺点：没法传递变量；

个人建议：有了占位符凡是使用继承的地方都可以使用占位符替换掉，继承的方式可以废弃掉了；

参考：
https://www.w3cplus.com/preprocessor/understanding-placeholder-selectors.html