# 令人頭痛的 @extend繼承
###### tags: `前端(frontend)` `scss` `@extend`

說到scss，一開使看到許多@ $ % ()...等符號就令許多初學者崩潰！！

對...我也是那位一度想放棄的初學者，好幾度想回去當假掰的小編 XD

好了進入正題，爬了很多文終於了解，首先來說明@extend寫法：

基本上@extend 要搭配著 %XXXX，那為什麼有看過沒有寫%的呢？

<font color="#f00">注意：我們先觀察不同寫法，編譯後的CSS差別</font>

:::info
SCSS
有%的寫法

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

h1{
 @extend %text-style;
}

h2{
 @extend %text-style;
}

:::

:::info
CSS
有%編譯後的CSS

h2, h1 {
  color: #333;
  font-size: 16px;
  letter-spacing: 2px;
}

:::

:::warning
SCSS
再來看看沒有%的寫法

.text-style{
color:#333;
font-size:16px;
letter-spacing:2px;
}

h1{
@extend .text-style;
}

h2{
@extend .text-style;
}

:::

:::warning
CSS
沒有%編譯後的CSS

.text-style, h2, h1 {
  color: #333;
  font-size: 16px;
  letter-spacing: 2px;
}

:::

有沒有發現編譯後的CSS差別呢？

### 使用%宣告： %text-style 不會被編譯出來

### 沒有使用%宣告： .text-style 會被編譯出來

原因在於 【使用%宣告】 是一個佔位符選擇器，意思是不會產生實體的對象，例如標籤、class等

假設今天html裡沒有 .text-style 的class

那麼我們就不必產生一個無意義的 .text-style

改用%text-style的方式宣告