五、混合巨集

當你的樣式變得越來越複雜，需要重複使用大段的樣式時， Sass 中的混合巨集就會有重大意義。

• 宣告混合巨集（使用@mixin來宣告）

  1.不帶引數的混合巨集：

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

  2.帶引數的混合巨集：

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

  3.複雜的混合巨集

  @mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
      @include prefixer(box-shadow, $shadow);
    } @else{
      $shadow:0 0 4px rgba(0,0,0,.3);
      @include prefixer(box-shadow, $shadow);
    }
  }

  這個 box-shadow 的混合巨集，帶有多個引數，這個時候可以使用“ … ”來替代。簡單的解釋一下，當 $shadow 的引數數量值大於或等於“ 1 ”時，表示有多個陰影值，反之呼叫預設的引數值“ 0 0 4px rgba(0,0,0,.3) ”。

• 呼叫混合巨集（使用@include來呼叫混合巨集）

  呼叫1.中宣告的混合巨集：

  button {
      @include border-radius;
  }

  編譯後的css為：

  button {
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }

• 混合巨集的引數

  1.傳一個不帶值的引數

  在混合巨集中，可以傳一個不帶任何值的引數，如：

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

  呼叫時，可以給這個混合巨集傳一個引數值：

  .box {
    @include border-radius(3px);
  }
  編譯後的css為：
  .box {
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }

  2.傳一個帶值的引數

  在混合巨集中，可以給引數傳一個預設值，如：

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

  呼叫時：

  .btn {
    @include border-radius;      //呼叫預設的3px的值
  }
  .box {
    @include border-radius(50%);     //將會覆蓋掉預設值
  }

  3.傳多個引數

  例如：

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

  呼叫時：

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

  還有一個特別的引數“…”，當混合巨集引數過多時使用，如：

  @mixin box-shadow($shadows...){
    @if length($shadows) >= 1 {
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    } @else {
      $shadows: 0 0 2px rgba(#000,.25);
      -webkit-box-shadow: $shadow;
      box-shadow: $shadow;
    }
  }

  呼叫時：

  .box {
    @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
  }
  編譯出來的css為：
  .box {
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  }

• 擴充套件/繼承（通過@extend實現）

  在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現程式碼的繼承。編譯後的css會將選擇器合併在一起，形成組合選擇器，如下所示：

  .btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
  }
  
  .btn-second {
    background-color: orange;
    color: #fff;
    @extend .btn;
  }

  編譯後的css為：

  .btn, .btn-primary, .btn-second {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .btn-primary {
    background-color: #f36;
    color: #fff;
  }
  
  .btn-second {
    background-clor: orange;
    color: #fff;
  }

• 佔位符（%placeholder）

  它可以取代以前 CSS 中的基類造成的程式碼冗餘的情形。因為 %placeholder 宣告的程式碼，如果不被 @extend 呼叫的話，不會產生任何程式碼。通過 @extend 呼叫的佔位符，編譯出來的程式碼會將相同的程式碼合併在一起。來看一個演示：

  %mt5 {
    margin-top: 5px;
  }
  %pt5{
    padding-top: 5px;
  }
  
  .btn {
    @extend %mt5;
    @extend %pt5;
  }
  
  .block {
    @extend %mt5;
  
    span {
      @extend %pt5;
    }
  }
  

  編譯後為：

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

• 混合巨集VS繼承VS佔位符

  1.混合巨集：

  編譯出來的 CSS 清晰告訴了大家，他不會自動合併相同的樣式程式碼，如果在樣式檔案中呼叫同一個混合巨集，會產生多個對應的樣式程式碼，造成程式碼的冗餘，這也是 CSSer 無法忍受的一件事情。不過他並不是一無事處，他可以傳引數。

  個人建議：如果你的程式碼塊中涉及到變數，建議使用混合巨集來建立相同的程式碼塊。

  2.繼承：

  使用繼承後，編譯出來的 CSS 會將使用繼承的程式碼塊合併到一起，通過組合選擇器的方式向大家展現，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的程式碼相對於混合巨集來說要乾淨的多，也是 CSSer 期望看到。但是他不能傳變數引數。

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

  3.佔位符

  編譯出來的 CSS 程式碼和使用繼承基本上是相同，只是不會在程式碼中生成佔位符 mt 的選擇器。那麼佔位符和繼承的主要區別的，“佔位符是獨立定義，不呼叫的時候是不會在 CSS 中產生任何程式碼；繼承是首先有一個基類存在，不管呼叫與不呼叫，基類的樣式都將會出現在編譯出來的 CSS 程式碼中。”