# 有關 @mixin 與 @extend 的秘密
###### tags: `前端(frontend)` `scss` `@mixin` `@extend`

剛學完css又要學scss的轉職人生

看到這些密密麻麻的符號及文字真的是想逃避

但...又想到已經學完50%了難道就要放棄嗎？

別氣餒！！我也是這樣過來的

<font color="#f00">注意：請觀察使用@mixin 與 @extend 編譯後的css差別 </font>

:::info
SCSS
@mixin 當沒有參數時
有參數的@mixin 請參考這篇：https://reurl.cc/eOdjKR

@mixin text-style {
  color:#999;
  font-size:18px;
  letter-spacing:2px;
}

h4{
  @include text-style;
}

h5{
  @include text-style;
}

:::

:::info
CSS
編譯後的CSS是將 text-style 裡的屬性及值放入h4及h5裡
這樣將會產生許多重覆性的程式碼，請繼續往下看看@extend寫法

h4 {
  color: #999;
  font-size: 18px;
  letter-spacing: 2px;
}

h5 {
  color: #999;
  font-size: 18px;
  letter-spacing: 2px;
}

:::

:::warning
SCSS
@extend

%text-style{
  color:#999;
  font-size:18px;
  letter-spacing:2px;
}

h2{
  @extend %text-style;
}

h3{
  @extend %text-style;
}

:::

:::warning
CSS
將這裡的CSS比對@mixin編譯後的CSS
是否發現他們不同的地方?

h3, h2 {
  color: #999;
  font-size: 18px;
  letter-spacing: 2px;
}

:::

### 使用@mixin：是將 text-style 裡的屬性及值放入h4及h5裡

### 使用@extend：是將 h2及h3 兩者指向 %text-style位置

### 總結：若是在沒有參數的情況下建議使用@extend，因不會產生重覆性的程式碼！！