SassでCSSを効率的に再利用可能なスタイルとして管理する、Mixinという機能について解説します。
Mixinを使用することで、再利用可能なスタイルセットを作成し、コードの重複を排除することで、効率的なスタイル管理を実現します。
この記事では、SassのMixinの基本的な使い方から応用まで、分かりやすく解説します。
なお、SassをCSSにコンパイルするやり方については以下の記事で解説していますので、Sassのコンパイルのやり方がわからない場合は、こちらから環境構築を行なってください。
INDEX
Mixinとは？
Mixinは、CSSのスタイルを再利用可能なモジュールとして定義するSassの機能です。
これにより、同じスタイルを複数の要素で使い回し、効率的にスタイルを管理することができます。
さらに、Mixinを使うことで、スタイルの再利用性を高めるだけでなく、コードの可読性や保守性も向上させます。それでは、早速Mixinを使ってみましょう。
Mixinの使い方
Mixinでは、Mixinを定義し、定義したMixinを呼び出して使用するとうい流れで使用します。
それでは順番に解説していきます。
Mixinの定義
まずはMixinを定義します。
例えば、インナーのスタイルをMixinとして定義する場合、次のようにします。
@mixin inner {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
padding: 0 40px;
}@mixinの後に、作成したいMixinの名前を定義（今回はinnerとしました）- 定義したMixinの後は通常のCSSと同様に
{ }の中にスタイルをセットする
Mixinの使用
次に定義したMixinを、呼び出して使用します。
先ほど定義したMixinを使用する際は、@includeの後に定義したMixin名を記述することで、活用できます。
@mixin inner {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
padding: 0 40px;
}
.inner {
@include inner;
}この状態でSassをコンパイルして、Mixinの内容が反映された状態でCSSが作成されていれば成功です。
引数を使ったMixinの活用
Mixinをより効率的にスタイルを定義する引数の活用について解説します。
Mixinに引数を渡すことで、柔軟なスタイルの定義が可能になります。
Mixinに引数を設定
今回も、先ほど定義したinnerのMixinを活用して解説します。
コンテンツのインナーは、デザインによって横幅が異なることがあるため、ここではmax-widthに引数を設定し、コンテンツごとにインナー幅を変更できるようにしました。
Mixinで引数を設定し、呼び出す場合次のようにします。
@mixin inner($width) {
margin-left: auto;
margin-right: auto;
max-width: $width;
padding: 0 40px;
}
.inner {
@include inner(1200px);
}@mixin innerの後に、($width)のように引数の名前を定義（widthの箇所に好きなように引数名を設定します）- タグの中で
@include inner(1200px);のように、引数の値を追加し、Mixinを呼び出す（1200pxの箇所に引数を設定します）
Mixinに複数の引数を設定する
引数には複数の値を設定することも可能です。今回は例として、paddingに引数を追加しました。
Mixinで複数の引数を設定合は、,で引数を繋げて使用します。
@mixin inner($width, $padding) {
margin-left: auto;
margin-right: auto;
max-width: $width;
padding: 0 $padding;
}
.inner {
@include inner(1200px, 30px);
}@include inner(1200px, 30px);の引数は、Mixinで定義した@mixin inner($width, $padding)の引数の順番に合わせて記述します。
Mixinの引数に初期値を定義
Mixinの引数では初期値を設定することが可能です。
引数にデフォルトの初期値を設定することで、より引数を便利に活用することができます。
さらに、引数を使ったMixinは、引数の値が渡されない場合エラーが発生する為、予期せぬエラーが発生しないためにも引数に初期値を設定する方法を解説します。
Mixinで引数にデフォルトの初期値を設定する場合は、$width:1000pxのように引数名に:で繋げて設定します。
@mixin inner($width:1000px, $padding:40px) {
margin-left: auto;
margin-right: auto;
max-width: $width;
padding: 0 $padding;
}
.inner {
@include inner(1200px, 30px);
}指定した引数のみのみ値を渡す方法
複数の初期値が設定されてる引数がある場合、指定したい引数のみ渡すことで、Mixinの他の引数はデフォルト値が使用されます。
指定したい引数のみ渡す場合は次のようにします。
この場合、$widthはデフォルト値の1000pxが使用され、$paddingには指定した値の30pxが適用されます。
@mixin inner($width:1000px, $padding:40px) {
margin-left: auto;
margin-right: auto;
max-width: $width;
padding: 0 $padding;
}
.inner {
@include inner($padding: 30px);
}別ファイルのMixinを使用する
最後に、別ファイルのMixinを呼び出して使用する方法について解説します。
実際の開発では、Mixinなどのモジュールは別ファイルで管理することで、さらに再利用性が向上し、効率的にMixinを管理することができます。
Mixinをパーシャルファイルとして作成する
Sassでファイルを分割して管理することをパーシャルと呼びます。
パーシャルファイルを作成する場合は、ファイル名の先頭に_をつけます。これにより、パーシャルファイルはSassのコンパイル対象から除外されます。
それでは以下のように、Mixinファイルをパーシャルしましょう。
style.scss
_mixin.scss@mixin inner($width:1000px, $padding:40px) {
margin-left: auto;
margin-right: auto;
max-width: $width;
padding: 0 $padding;
}別ファイルのMixinを呼び出して使用する。
別ファイルのMixinを使用する際は@useでパーシャルファイルを相対パスで指定します。
その際、パーシャルファイルの先頭の_と.scss拡張子は省略することが可能です。
Mixinを使用する場合は、@useで指定したファイル名の後にピリオド(.)を付けてMixinの名前を指定します。
@use 'mixin';
.inner {
@include mixin.inner;
}この状態でSassをコンパイルして、Mixinの内容が反映された状態でCSSが作成されていれば成功です。
また、パーシャル（ファイル分割）の使い方については、以下の記事でより詳しく解説しています。
まとめ
以上でMixinの基本的な使い方から、引数の設定、別ファイルからの呼び出し方までを解説しました。
SassのMixinは、スタイルの再利用性を高め、コードの効率的な管理を可能にする強力な機能です。
さらに、同じスタイルを複数の要素で使い回したり、保守性を高めることができます。
ぜひSassのMixinを活用して効率的なスタイル管理を実現してみてください。
