グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



【Sass実践編】「ミックスイン」を使って効率的にスタイルを管理しよう!使い方と利点を紹介!

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

ミックスインの基本

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

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

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

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

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

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

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

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

引数の初期値を設定する

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

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

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

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

複数の引数を指定する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

The following two tabs change content below.

加藤 陵二

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

FOLLOW US

最新の情報をお届けします