弥生研究所

人は誰しもが生きることの専門家である

【SCSS】Mixin と Extend の違いと使い分け

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 は、セレクタをグループ化することに明確な意図があるときに、使うと良いでしょう。