【Sass】@extendと@mixinの使い分け

定義したスタイルを複数のクラスで使用できるSassの@extendと@mixinの違いが分からなかったので、両者を比較して使い分けるべきケースをまとめる。

@extendの特徴

定義したスタイルを他のクラスに継承して使用できる

/* Sass */
.btn-base{
  border:1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.btn-success{
  @extend .btn-base;
  background-color: green;
}
.btn-error{
  @extend .btn-base;
  background-color: red;
}

/* CSS */
.btn-base, .btn-error, .btn-success {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.btn-success {
  background-color: green;
}

.btn-error {
  background-color: red;
}

プレースホルダーを使用する場合

継承元になったクラス(.btn-base)を利用しない場合は、プレースホルダー(%)を使用することでCSSにコンパイルされない

/* Sass */
%btn-base{
  border:1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.btn-success{
  @extend %btn-base;
  background-color: green;
}
.btn-error{
  @extend %btn-base;
  background-color: red;
}

/* CSS */
.btn-error, .btn-success {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.btn-success {
  background-color: green;
}

.btn-error {
  background-color: red;
}

@mixinの特徴

定義したスタイルを他のクラスで呼び出して使用できる

/* Sass */
@mixin btn-base{
  border:1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.btn-success{
  @include btn-base;
  background-color: green;
}
.btn-error{
  @include btn-base;
  background-color: red;
}

/* CSS */
.btn-success {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: green;
}

.btn-error {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: red;
}

引数を使用する場合

@includeに引数を渡すことで、呼び出し元のクラスごとにスタイルを調整することが出来る

/* Sass */
@mixin btn-base($bgc:transparent){
  border:1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: $bgc;
}
.btn-success{
  @include btn-base(green);
}
.btn-error{
  @include btn-base(red);
}

/* CSS */
.btn-success {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: green;
}

.btn-error {
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: red;
}

比較

@extend

メリット
- コード量が少ない
  継承元と継承先のクラスが1セレクタにグルーピングされるため、共通スタイルのコードの重複を防止できる
デメリット
- 引数が使用できない
  @mixinと違い引数が使えない分、継承されるスタイルは固定になる
- 可読性が下がる
  継承元と継承先のコードが離れるため、コードの可読性が落ちる。
  そのため、グルーピングできない関連性がないクラスへの@extendは控える。(関連性があるコードは距離が近く、関連性がないコードは距離が遠いため)

@mixin

メリット
- 引数が使える
  @includeしたクラスごとにスタイルの調整が出来る
- 可読性が高い
  コードが@includeしたクラスに全て記載されるため、可読性が高い
デメリット
- コード量が増える
  @includeしたクラスに同じスタイルが記載されるため、コードが重複する。

まとめ

グルーピング出来るような関係性のあるスタイルは@extendを使用する
関係性がない、または引数を利用したいなら@mixinを使用する

まとめのまとめ

継承関係があるなら@extend、それ以外は@mixin

seiya2130のブログ