SASS（SCSS）のmixinとは？が図解で分かる

SASSの便利機能のひとつ、mixinについて基礎的な部分を図解してみました。

mixinとは、よく使うスタイル等をあらかじめ変数として定義しておいて、欲しいときに呼び出し使い回す機能です。

この記事の目次

基礎の書きかた

記述としてはこうなるんですけど、


@mixin square {
  width: 100px;
  height: 100px;
}
.box {
  @include square;
}

これ、どういう意味かと言いますと、下記の通りです。

mixin1

”square”っていう変数を作るよー。と宣言、定義して、その中身はwidth:100px、height:100pxとする。

そして、boxというクラスに100pxの正方形というスタイルを当てたいなと思ったときに、変数squareを呼び出す。

こんなふうに人間語に直すと分かりやすいですね。

結果、出力先のCSSではこのようになります。


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

クラスそのものに直に当てたスタイルと組み合わせることもできます。


@mixin square {
  width: 100px;
  height: 100px;
}
.box {
  @include square;
　background: red;
}

これで、100pxの赤い正方形.boxが出来上がりました。

mixin2

呼び出し側（include）で引数を渡して使うこともできます。

200pxの正方形が欲しいなら、@include square(200px)ですね。

mixin3

引数の受取り側（mixin）で初期値を設定しておくこともできます。引数名：値ですね。こちらでは呼び出し側で何も引数を渡してないので、初期値がそのまま使われます。

mixin4

もちろん初期値は上書きできます。

mixin5

カンマで区切って、複数の引数を渡すこともできます。