Sassの@mixinとは？使い方完全解説【初心者向け】

Sassの@mixinってなんなんや。コードはよく出てくるけど今いちよくわからぬ

本記事では、上記のような方向けにSassの@mixinについて徹底解説します。これからSassを学ぶ方向けにわかりやすく解説します。

@mixin（ミックスイン）とはなんぞや

@mixin（ミックスイン）はSassの機能のひとつです。@mixinで定義したスタイルは再利用できます。

イメージとしては3行のコードも@mixinを使えば一行で書けるようになる！みたいな感じどす。

たとえば下記のようなCSSがあるとします。

ul.list {
margin: 0;
padding: 0;
list-style: none;
background: red;
}

ul.list-2 {
margin: 0;
padding: 0;
list-style: none;
background: skyblue;
}

上のコードを見ると、リセット用のCSSは全く同じ内容なのに2回書かれてます。いちいちこれを書くのはだるいですね。

こういうときに、@mixinを使えば以下のように書けます。

style.scss

@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}

ul.list {
@include reset-list;
background: red;
}

ul.list-2 {
@include reset-list;
background: skyblue;
}

コンパイル結果

ul.list {
margin: 0;
padding: 0;
list-style: none;
background: red;
}

ul.list-2 {
margin: 0;
padding: 0;
list-style: none;
background: skyblue;
}

だいぶコードがすっきりしました。

と、こんな感じで@mixinは定義したスタイルを再利用することができちゃいます。すばら！！

以下から具体的な書き方を紹介します。

@mixin（ミックスイン）の使い方

@mixinで定義
includeで呼び出し

工程を大きく分けると上記の通りです。詳しく解説します。

@mixinを定義する

@mixinの書き方は下記です。

@mixin <mixinの名前> {
// スタイルの定義
}

先ほど挙げた例でいうと

<mixinの名前>= reset-list
スタイルの定義 = margin:0 …省略

となります。
mixinの名前はどんな事を定義しているのかわかる名前にしてあげましょう。もちろん英語で。

@includeで呼び出し

@mixinを定義しただけでは動きません。定義した@mixinを使うには@includeを使います。書き方は以下。

@include <@mixinの名前>

この1行だけでさきほど定義したコードを記述できます。

まとめると

@mixin でスタイルを定義する
@include で定義した@mixinを呼び出す

基本の説明はこれで終わりです！

@mixinのさらに便利な使い方

ここまでは、基本的な@mixinの使い方を説明してきましたが、実はまだまだ使い方があります。よくある使い方を説明します。

引数を使ってみる
@contentを使ってみる

引数を入れてみる

@mixinでは引数を使うことができます。

引数は関数で使える値みたいな感じです、詳しくは下記の記事が参考になります。

参考引数とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典null

実例を見たほうが早いです。以下の例では正方形を作るための@mixinを定義しています。

style.scss

@mixin square($size) {
width: $size;
height: $size;
}

.box {
@include square(40px);
}

コンパイル結果

.box {
width: 40px;
height: 40px;
}

@include square()の()内で指定した値がwidthとheightの値に入るようになっています。

こんな感じで、入れる値を任意にしてより使いやすく再利用ができます。

@contentを使ってみる

次は@contentという機能を使ってみましょう。

これは、@include {}で{}内に任意の値を入れられるものです。イメージが湧かないと思うのでまたまた実例で説明します。

style.scss

@mixin sp {
    @media screen and(max-width: 480px) {
        @content;
    }
}

body {
    font-size: 16px;
    @include sp {
        font-size: 14px;
    }
}

コンパイル結果

body {
    font-size: 16px;
}

@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

@includeの{}内に書いたfont-size: 14pxが適用されてますね。

こんな感じで@contentは、記述した任意の値が反映されるよ～という意味です。

@mixin（ミックスイン）はどういうところで使うねん？？

色々と例文を見てきましたが、結局実際のコーディングではどういうところで使うねん！と。
ここからは実際のコーディングで@mixinの使用例を見ていきましょう。

メディアクエリを定義しちゃう

さっきの例文でもちょっと出ましたが…

@mixinがよく使われるのはメディアクエリの指定です。

style.scss

// SPのメディアクエリを定義する
@mixin sp {
    @media screen and(max-width: 480px) {
        @content;
    }
}

body {
    font-size: 16px;
    @include sp {
        font-size: 14px;
    }
}

@media screen and…と毎回書くのって大変ですよね。あと管理もしづらいです。そういうときのために@mixinで定義しておけば、メディアクエリの記述量が格段に減ります。

これは実務では必ず使う記述なので覚えておきましょ。メディアクエリを指定する方法は下記の記事で詳しく解説しています。

2023年4月6日Sassの@mixinを使ってメディアクエリを指定する方法【コーディング爆速】

スタイルをリセットしちゃう

デフォルトのスタイルをリセットするときなんかにも使えそうです。たとえば、ボタンのスタイルをリセットしてみます。

@mixin reset-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

button {
    @include reset-btn;
    // 任意のスタイル
}

こんな感じで、あらかじめリセット用のスタイルを定義しておけば書く手間が省けます。