CSSを書いていると、同じ形でも色が違うだけのボタンや、線の太さが違うだけの見出しなど、似たようなスタイルを一括で管理したいと思ったり、 ブレイクポイントを記述する際に、いちいち「@media screen～」と書くのが面倒だと思った経験などあるかと思います。 Sassではそんな使いまわしたいスタイルを管理出来る「ミックスイン」という機能があります。 今回はこのミックスインについてご紹介します。

ミックスインの基本

ミックスインの基本は、@mixinと、@includeの二つで構成されています。
Sassの記述は下記のようになります。

/*ミックスインを定義*/
@mixin box001 {
    padding: 20px;
    margin-top: 30px;
    background-color: #ededed;
}

/*定義したミックスインを呼び出し*/
.sample-box {
    @include box001;
}

@mixinのあとに半角スペースを空けて、任意のミックスイン名を記述します。（上記の例では「box001」というミックスイン名です）
その後ろに波括弧でスタイルを記述していきます。
@includeで呼び出す際には、呼び出したい場所で@include、半角スペース、呼び出したいミックスイン名と記述します。

.sample-box {
  padding: 20px;
  margin-top: 30px;
  background-color: #ededed;
}

コンパイル後は上記のように、@includeで呼び出した場所にスタイルが記述されています。
このように、@mixinで定義したスタイルを@includeで呼び出すのがSassのミックスインの基本となります。

引数を使ったミックスインの利用

ミックスインは引数を使うことで、定義した値を一部変更することができます。
これにより、色が違うだけのボタンや、サイズが違うだけの装飾などにおいて、共通のスタイルを流用し変更する値を引数で置き換えることができます。
共通部分のスタイルの一括管理が可能となり、メンテナンス面で大きく効果を発揮します。
ではまず、引数の基本的な使い方を見ていきましょう。

/*引数を使ったミックスインの定義*/
@mixin box002($value) {
    border: solid 2px #666;
    border-radius: $value;
}

ミックスイン名の後に丸括弧を記述しその中に引数名を記述することで、ミックスインで引数を使うことができます。
引数は変数と同じく$（ドルマーク）の後に任意の名前を設定します。（上記の例では「value」という引数名です）
引数で値を変えたいプロパティにも同じ名称を記述します。 次に@includeで呼び出しますが、このときに値を設定します。

.sample-box {
    @include box002(10px);
}
.test-box {
    @include box002(7px 5px);
}

@includeで呼び出すミックスイン名の後ろに、丸括弧で設定したい値を記述します。

.sample-box {
  border: solid 2px #666;
  border-radius: 10px;
}

.test-box {
  border: solid 2px #666;
  border-radius: 7px 5px;
}

コンパイル結果を見ると.sample-boxと.test-boxではborder-radiusの値が異なっていることが分かります。 このように引数を使ってミックスインを定義すれば、値を変えながら同じスタイルを流用することができます。

引数の初期値を設定する

引数を使ったミックスインで毎回値を設定するのは面倒なので、@mixinでスタイルを定義する際に引数の初期値を設定します。
初期値を設定しておくと、初期値を変更したいときだけ値を設定すれば済むようになります。

/*引数に初期値を設定*/
@mixin box002($value: 10px) {
    border: solid 2px #666;
    border-radius: $value;
}

初期値の設定は、引数名の後に「:（半角コロン）」を記述し、そのあとに値を記述します。

.sample-box {
    @include box002;/*初期値のまま呼び出し*/
}
.test-box {
    @include box002(7px 5px);/*初期値から値を変更して呼び出し*/
}

値を変更したい場合は先ほどと同じく@includeで呼び出すミックスイン名の後ろに、丸括弧で記述します。
初期値から変更する必要がない場合は、丸括弧の中身を省いても良いですし、上記のように丸括弧ごと省略しても良いです。

.sample-box {
  border: solid 2px #666;
  border-radius: 10px;/*初期値*/
}

.test-box {
  border: solid 2px #666;
  border-radius: 7px 5px;/*変更した値*/
}

コンパイル後は上記のようになります。値を省略した箇所は初期値が記述されていることが確認できます。

複数の引数を指定する

引数は「,（カンマ）」で区切ることで複数指定することができます。

/*引数を複数設定*/
@mixin box003($padding: 10px, $margin: 30px) {
    padding: $padding;
    margin: $margin;
}

$paddingで第一引数を、$marginで第二引数を指定しました。

.sample-box {
    @include box003;/*初期値のまま呼び出し*/
}
.test-box {
    width: 500px;
    @include box003(20px, 0 auto 30px);/*初期値から値を変更して呼び出し*/
}

値を変更する場合も、カンマで区切れば二つの値を変更することができます。

.sample-box {
  padding: 10px;/*初期値*/
  margin: 30px;/*初期値*/
}

.test-box {
  width: 500px;
  padding: 20px;/*変更した値*/
  margin: 0 auto 30px;/*変更した値*/
}

コンパイル結果を見ると、上記のように二つの値が変化していることが分かります。
複数の引数のうち、一つだけ値を変更したい場合は下記のように記述します。

/*第一引数だけ変更*/
.sample-box {
    @include box003(20px);
}
/*第二引数だけ変更*/
.test-box {
    width: 500px;
    @include box003($margin:0 auto);
}

第一引数を変更したい場合は、上記.sample-boxのように第二引数の記述を省略すれば問題ありません。
第二引数を変更したい場合は、第一引数を省略してもエラーになってしまいますので、上記.test-boxのように対象の引数を指定することで対応できます。

.sample-box {
  padding: 20px;/*変更した値*/
  margin: 30px;/*初期値*/
}

.test-box {
  width: 500px;
  padding: 10px;/*初期値*/
  margin: 0 auto;/*変更した値*/
}

コンパイル後は上記になります。指定した値だけ変わっているのが確認できます。

カンマが含まれている値の引数を定義する

複数の引数を指定するにはカンマを使いましたが、box-shadowのように値にカンマが含まれている場合には、通常通りに記述をすると複数の値とみなされてエラーとなります。
そこで、@mixinで引数を設定する際に可変長引数を用いることで一つの値として設定することができます。

/*可変長引数を使ってミックスインを設定*/
@mixin box004($shadow...) {
    box-shadow: $shadow;
}

可変長引数は、上記のように引数名の後に「…（ドットを三つ）」記述すると使用できます。

.sample-box {
    @include box004(0px 0px 16px -6px rgba(0,0,0,0.6));
}

これで@includeの際にカンマを使っても一つの値とみなされます。
無事コンパイルすることができ下記のようになります。

.sample-box {
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6);
}<

可変長引数は読み込み時にも使える

複数の引数のあるミックスインを読み込む際にも可変長引数は使用することができます。

/*引数を複数設定*/
@mixin box005($padding: 20px, $margin: 30px, $bgc: #ededed) {
    padding: $padding;
    margin-bottom: $margin;
    background-color: $bgc;
}

$value: 5px, 10px;

上記のように、複数の引数があるミックスインを定義して、変数$valueにカンマ区切りで値が代入されているとき、

.sample-box {
    @include box005($value);
}

変数をそのままの状態で読み込んでしまうと、コンパイル後は下記のように一つの値として記述されてしまいます。

.sample-box {
  padding: 5px, 10px;/*$valueの中身が一つの値として記述されてしまった*/
  margin-bottom: 30px;
  background-color: #ededed;
}

上記の結果ではなく、padding: 5px;とmargin-bottom: 10px;を結果として得たい場合、@include時に可変長引数を使えば解決できます。

.sample-box {
    @include box005($value...);
}

@mixin時に使ったのと同様に、@includeの引数名のあとにドットを三つ記述します。

.sample-box {
  padding: 5px;/*$valueの一番目の値*/
  margin-bottom: 10px;/*$valueの二番目の値*/
  background-color: #ededed;
}

これでコンパイル後は無事にpaddingとmarginに値が適用されました。

ミックスインにコンテントブロックを渡す

ミックスインを利用する大きな利点の一つに@contentがあります。
@contentは記述されたスタイルやルールセットをミックスインに渡す機能で、渡された記述は、@contentが書かれた場所で展開します。
この一番の使いどころが、ブレイクポイントの管理です。

/*ブレイクポイントを設定*/
@mixin sp {
    @media screen and (max-width: 767px) {
        @content;/*スタイルを展開したいところに記述する*/
    }
}

上記のようにスマートフォンのメディアクエリを記述したミックスインを定義し、中に@contentを記述します。

.sample-box {
    width: 1200px;
    @include sp {
        width: 100%;/*ミックスインに渡したいスタイルを記述する*/
    }
}

そのうえで@includeで呼び出す際、波括弧内にスマートフォン用のスタイルを記述すると、@contentが記述された位置にスマートフォン用のスタイルが展開された状態でミックスインが呼び出されます。

.sample-box {
  width: 1200px;
}

@media screen and (max-width: 767px) {
  .sample-box {
    width: 100%;/*渡したスタイル*/
  }
}

これにより、一度ミックスインで定義しておいて使いたいところで@include spと呼び出しスタイルを書くだけでスマートフォン用のスタイルを記述することができます。
いちいち「@media screen～」と書く手間から解放されるので、記述時の時間短縮になります。
さらにブレイクポイントの修正をしたい場合も一か所変更するだけですべてに適用されるのでメンテナンスが容易となります。

さいごに

今回紹介したSassのミックスインは、使いこなせば記述量を大幅に削減できる大変便利な機能です。
また、引数を使ったスタイルの管理や、最後の例のようなブレイクポイントの管理などメンテナンス性においても大変高い効果を発揮しますので、ぜり取り入れてみてください。

この記事を書いた人

加藤 陵二ソリューション事業部 webデザイナー

アーティスへ入社後、webデザイナーとして大学サイトや病院サイト、企業サイト等のデザイン・コーディングに携わる。資格：Photoshopクリエイター能力認定試験スタンダード、illustratorクリエイター能力認定試験エキスパート、Webクリエイター能力認定試験初級

この執筆者の最新記事

この執筆者の記事一覧

• 2024年11月6日WEB【jQuery】ページ内のどのコンテンツにいるのか分かるエレベーターメニューを実装してみた
• 2024年8月27日WEB【bxSlider】コールバック関数を使って2つのスライダーを連動させてみた
• 2024年6月26日WEB【CSS】CSSで画像をクリッピング！clip-pathの使い方を解説！
• 2024年5月2日WEB【CSS】比較関数を使ってみよう！min()、max()、clamp()の使い方を解説！