https://www.imooc.com/code/7041 ←

a) Sass 中的混合巨集使用

@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; }

/*# sourceMappingURL=test.css.map */

    總結：編譯出來的 CSS 清晰告訴了大家，他不會自動合併相同的樣式程式碼(有四個margin-top:5px)，如果在樣式檔案中呼叫同一個混合巨集，會產生多個對應的樣式程式碼，造成程式碼的冗餘，這也是 CSSer 無法忍受的一件事情。不過他並不是一無事處，他可以傳引數。
    個人建議：如果你的程式碼塊中涉及到變數，建議使用混合巨集來建立相同的程式碼塊。

b) Sass 中繼承

.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 期望看到。但是他不能傳變數引數。

    個人建議：如果你的程式碼塊不需要專任何變數引數，而且有一個基類已在檔案中存在，那麼建議使用 Sass 的繼承。

c) 佔位符

%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 程式碼中。”