Zenn
🎃

【SCSS】@extend・mixinの使い分け

2022/05/06に公開
HTML
Scss
tech

@extend・mixinの言葉一度は聞いたことあるけど、
「使い方わからないよ」「なんか難しそう」と思ってる方。
この記事を最後まで読めば、@extendとmixinの使い方が理解でき、
普段のコーディングスピードが爆速で上がります。
最後まで読んで頂けたら嬉しいです。

目次
@extendとmixinの使い分け
-@extend
-　mixin
@extendとmixinの違いは何？
結局@extendとmixin使えばいいの？　
-まとめ

@extendとmixinの使い分け

@extendとmixinはどちらも、コード使い回せる便利な機能です。
初めにスタイルを定義し、別の場所でスタイルを再利用できます。
今回は「ボタン」を作成しながら、解説します。
初めに@extendを利用した記述方法です。

@extend

<-- html -->
<body>
 <a href="#" class="button1">ボタン１</a>
 <a href="#" class="button2">ボタン２</a>
</body>

//SCSS
.button{　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//ボタンの基本の装飾を定義
 display: inline-block;
 padding: 10px;
 width: 300px;
 max-width: 100%;
 border: 1px solid #ddd;
 background-color: #ddd;　　　　　　　　　　　　　　//文字が灰色
 color: #000;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//文字が黒
 text-decoration: none;
 text-align: center;
}
.button1{
 @extend .button;　             　//ボタンの基本の装飾を読み込む
 background-color: #ff0000ee;　　 //背景が赤
 color: #fff;　　                 //文字が白
}
.button2{
 @extend .button;　　             //ボタンの基本の装飾を読み込む
 background-color: #0000ff;　   　//背景が青
 color: #fff;　　                 //文字が白
}

完成図

@extendの記述方法　3ステップ

  1. 「.botton」クラスに、ボタンの基本の装飾を定義。
  2. 「.button1」クラスに、　@extend .button;　　と記入。
  3. 上書きしたい部位をスタイルで上書きする。（例：background-color: #ff0000ee;)

次にmixinを利用した記述方法です。

mixin

 <-- html -->
<body>
  <a href="#" class="button1">ボタン１</a>
  <a href="#" class="button2">ボタン２</a>
</body>

//SCSS
@mixin BaseButton(){　　　　　　　　　　　　　　　　　　　　　　　　//ボタンの基本の装飾を定義
 display: inline-block;
 padding: 10px;
 width: 300px;
 max-width: 100%;
 border: 1px solid #ddd;
 background-color: #ddd;　　　　　　　　　　　　　　//文字が灰色
 color: #000;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//文字が黒
 text-decoration: none;
 text-align: center;
}
.button1{
 @include BaseButton();        //ボタンの基本の装飾を読み込む
 background-color: #ff0000ee;　　 //背景が赤
 color: #fff;　　                 //文字が白
}
.button2{
 @include BaseButton();        //ボタンの基本の装飾を読み込む
 background-color: #0000ff;　   　//背景が青
 color: #fff;　　                 //文字が白
}

完成図

mixinの記述方法　3ステップ

  1. ボタンの基本の装飾を定義。　　
    @mixin 　BaseButton(){この中にスタイルを記入}　
    BaseButton()　の「BaseButton」は好きな名前でOK。
  2. 「.button1」クラスに、　@include BaseButton(); と記入。
    BaseButton()　の部分は、ステップ1で定義した名前を記入。
  3. 上書きしたい部位をスタイルで上書きする。（例：background-color: #ff0000ee;)

@extendとmixinの違いは何？

SCSSファイルからCSSファイルに変換されたときの中身が変わってきます。

初めに、@extendで記述したCSSファイルの中身を見ていきましょう。

//CSS
.button, .button1, .button2 {
  display: inline-block;
  padding: 10px;
  width: 300px;
  max-width: 100%;
  border: 1px solid #ddd;
  background-color: #ddd;
  color: #000;
  text-decoration: none;
  text-align: center;
}
.button1 {
  background-color: #ff0000ee;
  color: #fff;
}
.button2 {
  background-color: #0000ff;
  color: #fff;
}

続いて　mixinで記述したCSSファイルの中身です。

//CSS
.button1 {
  display: inline-block;
  padding: 10px;
  width: 300px;
  max-width: 100%;
  border: 1px solid #ddd;
  background-color: #ddd;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #ff0000ee;
  color: #fff;
}
.button2 {
  display: inline-block;
  padding: 10px;
  width: 300px;
  max-width: 100%;
  border: 1px solid #ddd;
  background-color: #ddd;
  color: #000;
  text-decoration: none;
  text-align: center;
  background-color: #0000ff;
  color: #fff;
}

違いわかりますか？

@extendで記述した場合、
.button, .button1, .button2 {}とグルーピングで記述されており、
ボタンの基本の装飾がその中に記述されています。

mixinで記述した場合、初めの部分にボタンの基本の装飾の記述が消えています。
そして、「.button1」 and 「.button2」の中に記述されています。

結局@extendとmixin使えばいいの？

結論、mixinがいいです。
理由は引数が利用できる点です。
引数についての解説は、また別の記事で紹介します。

まとめ

mixinと@extendを利用することで、ボタンなどの何度も使うパーツを
短いコードで記述でき、時短に繋がります。
参考になれば幸いです。

Discussion