混入(@mixin)

壓縮程式碼段落，將程式碼帶入到對應的樣式代碼，可帶入變數。
但不會自動合併相同的樣式代碼，如果在樣式文件中引用同一個混合，會產生多個對應的樣式代碼，造成代碼的冗餘。

適合：程式碼需要帶入多個變數進行運算。
優點：減少重複撰寫樣式的時間。
缺點：可能造成編譯後的 CSS 樣式大量重複，使檔案異常肥大。

例如:

// scss //
@mixin mt($value){
  margin-top: $value;  
}

.block {
  @include mt(10px);

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

.header {
  color: blue;
  @include mt(10px);

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

編｜
譯｜　　會產生多個對應的樣式代碼，造成代碼的冗餘。
後｜
　Ｖ

// css //
.block {
  margin-top: 10px;
}
.block span {
  display: block;
  margin-top: 10px;
}

.header {
  color: blue;
  margin-top: 10px;
}
.header span {
  display: block;
  margin-top: 10px;
}

繼承(@extend)

合併相同程式碼，但沒辦法帶入變數。

適合：樣式都固定不變，不需要用參數帶進去改變樣式。
優點：比起用 mixin ，程式碼會相對乾淨許多。
缺點：無法帶入變數。

例如:

// scss //
.mt{
  margin-top: 10px;  
}

.block {
  @extend .mt;

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

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

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

編｜
譯｜　　合併相同程式碼，讓程式碼更加乾淨。
後｜
　Ｖ

// css //
.mt, .header span, .header, .block span, .block {
  margin-top: 10px;
}

.block span {
  display: block;
}

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

@mixin 和 @extend 使用時機與差異，可考量以下兩點

• 是否需傳遞參數
• 考慮編譯後 CSS 大小

佔位符(%placeholder)

編譯出來的CSS代碼和繼承基本上是相同。
佔位符是獨立定義，不引用時是不會在CSS中產生任何代碼。
而繼承是只要有一個樣式代碼，不論引不引用皆會在CSS中產生代碼。

適合：不需要參數帶進去改變樣式，也不需要class時
優點：合併多餘代碼，程式碼會乾淨許多。
缺點：沒有引用佔位符時，Sass文件中的佔位符就不會不出現在CSS文件中。

例如:

// scss //
%mt{
  margin-top: 10px;  
}

.block {
  @extend %mt;

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

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

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

編｜
譯｜　　合併多餘代碼，讓程式碼更加乾淨。
後｜
　Ｖ

// css //
.header span, .header, .block span, .block {
  margin-top: 10px;
}

.block span {
  display: block;
}

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