SCSS ではソースコードを共通化する機能として、mixin(include) と、extend が用意されています。 比較的単純な共通化であれば、mixin も extend も同じ役割を担うことができるため、機能的な違いだけで mixin と extend を使い分けることが難しい場合があります。 そこで、mixin と extend のどちらでも実装できる状況で、どちらを選択すべきなのかをまとめました。
結論
- コードを共通化するのが目的なら、まず mixin を検討する
- グループ化したいときのみ、extend を検討する
機能的な違い
さっくりと、基本的な機能の違いを確認します。
Mixin
- 引数を定義できる（引数なしも定義できる）
- Mixin の定義自体は出力されない
SCSS（変換前）
@mixin bold {
font-weight: bold;
}
.text-black {
@include bold;
color: black;
background-color: white;
}
.text-white {
@include bold;
color: white;
background-color: black;
}
CSS（変換後）
.text-black {
font-weight: bold;
color: black;
background-color: white;
}
.text-white {
font-weight: bold;
color: white;
background-color: black;
}
@include bold を記述した箇所が、そっくりそのまま @mixin bold のスタイルに置き換わっています。
@mixin bold のスタイルそのものは、出力されません。
Mixin は、プログラミング言語のメソッドや関数とほぼ同じイメージで使えます。
Extend
- 既存のスタイルを継承する
- 継承元のスタイルの定義を出力できる（出力しない方法もある）
- 継承先のスタイルはグループ化される
SCSS（変換前）
.bold {
font-weight: bold;
}
.text-black {
@extend .bold;
color: black;
background-color: white;
}
.text-white {
@extend .bold;
color: white;
background-color: black;
}
CSS（変換後）
.bold, .text-white, .text-black {
font-weight: bold;
}
.text-black {
color: black;
background-color: white;
}
.text-white {
color: white;
background-color: black;
}
extend の最大の特徴は、継承元のスタイルが継承先のセレクタでグループ化されることです。
結論の補足
上記の例では、mixin でも extend でも同じ結果になります。 実際のところ、引数を使わないのであれば、content などの機能を使わない限り、mixin で書けることは extend でもかけてしまいます。
先にも述べたように、extend の特徴はセレクタがグループ化されることです。 したがって、変換前のソースコードにしか興味を持たないのであれば、mixin と extend はどちらを使っても差異はありません。 しかし、現実にはコンパイルした CSS をブラウザの開発者ツールなどで解析することがあります。 このような時に、出力されている CSS でセレクタがどのようにグループ化されているかは解析のしやすさに影響します。 extend を雑に使うと、意味的に全く関連性のないセレクタ同士がグルーピングされることになります。
extend は、セレクタをグループ化することに明確な意図があるときに、使うと良いでしょう。
