Sassの「@mixinと@extendの違い」と使い分け

2020年1月23日

Sassの勉強中だけど、@mixinと@extendの違いがいまいちよくわからない。それぞれの使い所が知りたい。

確かに、@mixinと@extendは機能的ににている。それぞれの特徴を把握して、最初の段階からきっちり使い分けを学んでおこう！

今回は@mixinと@extendの違いと使い分けを、その特徴を抑えながら、サンプルコードを使いながらじっくり解説していこう！

@extendのおさらい

@extendは一言で言うと「継承」。@extendは次の例のように、一度定義したクラスを、他のクラスに継承するというスタイルで使う。

.base-border{
  border:1px solid #ddd;
}
.box1{
  @extend .base-border;
  width:100%;
}
.box2{
  @extend .base-border;
  width:50%;
}

@mixinのおさらい

@mixinは、@mixin hoge(){}という記述でスタイルを定義して、別の場所でそのスタイルを使い回せる機能であり、さらに「引数」が使えるという大きなメリットがある。

@mixinをもっと詳しくおさらししたい方はこちらの記事を確認しておこう。

▶ Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

Sassの基礎は分かってきたので、そろそろ@mixin（ミックスイン）の使い方を学びたい。Sassの真骨頂ともいえる@…

引数を使わない場合

@mixin baseBorder{
    border:1px solid #ccc;
}
.box1{
    @include baseBorder;
    width: 100%;
}
.box2{
    @include  baseBorder;
    width: 50%;
}

引数を使う場合

@mixin baseBorder($borderSize:1px, $borderType:solid, $borderColor:#ccc){
    border:$borderSize $borderType $borderColor;
}
.box1{
    @include baseBorder();
    width: 100%;
}
.box2{
    @include  baseBorder($borderColor:#f90);
    width: 50%;
}

@mixinと@extendとの違い

一見にている「@mixin」と「@extend」だが、使っていくとその違いに気づくだろう。

同じようなCSSスタイルを設定した場合で比較してみよう！

@extendを使ったSass

.base-box{
  border:1px solid #ddd;
  padding:10px;
  background-color:#eee;
  box-sizing: border-box;
}
.box1{
  @extend .base-box;
  width:100%;
}
.box2{
  @extend .base-box;
  width:50%;
}

コンパイル後のCSS

.base-box, .box1, .box2{
  border:1px solid #ddd;
  padding:10px;
  background-color:#eee;
  box-sizing: border-box;
}
.box1{
  width:100%;
}
.box2{
  width:50%;
}

コンパイル後のCSSを見て気づく点はないだろうか？.base-box.box1.box2がグルーピングされている。

グルーピングは良いのだが、CSSだけ見てよく考えると.base-boxという記述はSassで@extend機能を使う為に作ったクラスであり、実際のCSSでは不要な記述である。

今度は、おなじスタイルを@mixinで実現してみよう

@mixinを使ったSass

@mixin baseBox(){
    border:1px solid #ddd;
    padding:10px;
    background-color:#eee;
    box-sizing: border-box;
}
.box1{
    @include baseBox();
    width: 100%;
}
.box2{
    @include baseBox();
    width: 50%;
}

コンパイル後のCSS

.box1{
  border: 1px solid #ddd;
  padding: 10px;
  bacgroud-color: #eee;
  box-sizing: border-box;
  width:100%;
}
.box2{
  border: 1px solid #ddd;
  padding: 10px;
  bacgroud-color: #eee;
  box-sizing: border-box;
  width:50%;
}

コンパイルされたCSSを見ると、今度はbox1とbox2はグルーピングされず、別々の記述になってしまったが、baseBoxという不要な記述は無い。

@extendのメリット・デメリット

@extendは手軽に使えて、スタイルがグルーピングされてコードが短くなるという点は良いが、スタイルを定義した元のクラスは無駄に記述されてしまうというデメリットがある。（この点は後述する「プレースホルダー」を使えば解決します。）

また、「引数」が使えないという点も比較すると、デメリットと言えるだろう。

ただし、グルーピングされるというのは注意が必要で、グルーピングされてしまうが故に、コンパイル後のCSSでは「関連するソースコードの記述位置が遠く離れて」しまって、可読性がわるくなってしまう。

またグルーピングされるという意味では、しっかりと意味のあるグルーピングを意識して使わないといけない。

@mixinのメリット・デメリット

@mixinのメリットは、なんといっても「引数」が使えて超絶便利という点と、コードがグループ化されずに、分かれてわかりやすいという点。

デメリットは、グルーピングされないので重複するコードが記述されてしまうという点だろう。

つまり「引数を使わない」のであれば、単にコードが長くなってしまうという意味ではも、@mixinを使わない方が良いと言えるかもしれない。

@extendでプレースホルダーの使い方

前述したように@extendでスタイルを定義する際の無駄なクラスが出力される点の解決法として「プレースホルダー」を使う方法を解説しよう。

プレースホルダーは「%キーワード」で記述する事で、プレースホルダーで指定したキーワードは、コンパイルされたCSS上では表示されない。

プレースホルダーを使った@extendのSass

%base-box{
  border:1px solid #ddd;
  padding:10px;
  background-color:#eee;
  box-sizing: border-box;
}
.box1{
  @extend %base-box;
  width:100%;
}
.box2{
  @extend %base-box;
  width:50%;
}

コンパイル後のCSS

.box1, .box2{
  border:1px solid #ddd;
  padding:10px;
  background-color:#eee;
  box-sizing: border-box;
}
.box1{
  width:100%;
}
.box2{
  width:50%;
}

コンパイル後はbase-boxという表示は出てこないのがわかるだろう。

＠mixinと@extendの使い分け

ここまで両方の特徴を解説してきたが、個人的には極力「引数を利用して@mixin」を使う方が良い考える。「引数」を利用したmixinの便利さは、言うまでもなく、ソースコード上の可読性・メンテナンス性・カスタマイズ性が@mixinの方が優れているからだ。

逆に「引数」を使わないのであれば、@mixinは使うべきではない。

もし@extendを使うなら、%プレースホルダーを利用して、コードをグループ化した方がスマートな記述になる場合に利用すると良いだろう。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント

学習スタイルが自分に合っているか？
低価格でコスパの良い学習料金か？
講師に質問しやすい環境か？
無料体験できるスクールか？

数あるスクールの中から、実際に受講してわかった事や現役プロならでは目線で厳選・比較したこちらの記事「現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！」を参考に自分に合ったスクールを探そう↓

▶ 現役プロ比較！短期｢WEBデザインスクール12校｣おすすめランキング！

現役デザイナーが実際にスクールを２校受講した経験を元に徹底比較調査した、WEBデザインスクールランキング！まず最初に実…

まとめ

@mixinも@extendもとても便利な機能。それぞれの特徴を理解して適材適所で使えば、Sassの力を最大限に活かせる機能といっても過言ではないだろう！

Sassの基本をもっと学びたい方は、こちらの記事「Sassを基礎から学ぶ」を参考にしておこう。

やはりWEBの学習は「基礎」が一番重要！「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済むのだ。

しかし時間をかけて学ぶのが難しい方や、できるだけ速く習得したい方はプログラミングスクールなどを検討するのもありだろう。私も実際にオンラインプログラミングスクールを利用して、プログラミングを習得したのでその良さを実感している。自分にあったスクールを探したい人は、実際に私が使ったスクールをはじめいくつかおすすめのスクールを比較しているので、こちらの記事を参考になるだろう！

スクールは多少の費用がかかるが、その分早く仕事で稼げて元以上のものを得られるメリットも！一度検討してみるのもありだろう。