Stan Blog: [SASS] @extend、@mixin 差別

@extend 適合使用在合併相同程式碼但需謹慎使用，會增加 selector 間的關聯

%title {
    color: red;
    font-size: 15px;
    font-weight: bold;
}

.main h2 {
    @extend %title
}

.content h3 {
    @extend %title
}

.sidebar h4 {
    @extend %title
}

編譯出來會是

.main h2, .content h3 {
    color: red;
    font-size: 15px;
    font-weight: bold;
}

使用 mixin，編譯後每行都載入同樣片段，css 會越漸肥大 (此例 3 個地方 extend，就會有 9 行程式碼)

@mixin 適用場景

記住很多段落的程式碼，e.g.
```
@include show-more
```
可以帶入變數，e.g.
```
@include span(6)
```

Ref:

When to use @extend; when to use a mixin