Sassの@mixin

Sassで一番使える機能として有名な@mixin(ミックスイン)。
スタイルの集まりを定義しており他の場所に呼び出して使うという点では
@extendみたいですが、定義した@mixinのプロパティ値を変更して
使えるという意味では、@extendというよりもPHPなどのユーザ定義関数に近いです。

@mixinの基本

sass

//まずは定義するためのSassを作成
@mixin boxSet{
 padding: 15px;
 background: #999;
 color: #FFF;
}

//その後に定義した@mixinを@inclueを使って呼び出す
.relatedArea{
	@include boxSet;
	}

css(コンパイル後)

.relatedArea {
  padding: 15px;
  background: #999;
  color: #FFF;
}

このように@mixinは@inclueとセットで使用します。

ここまでは@extendと同じですが、ユーザ定義関数を例にとったように@mixinは「引数」を使うことで
本領発揮します。

sass

//@mixin の直後は半角スペース必須!
//半角開けた後のミックスイン名後に引数(変数)を記述。
@mixin boxSet($value){
 width: $value;
 height: $value;
}

//インクルードしたミックスイン名の引数に適用したい値を入れる
.small_size{
	@include boxSet(10px);
	background: #008EFF;
	}

.big_size{
	@include boxSet(30px);
	background: #FF0004;
	}

css(コンパイル後)

.small_size {
  width: 10px;
  height: 10px;
  background: #008EFF;
}

.big_size {
  width: 30px;
  height: 30px;
  background: #FF0004;
}

引数の初期値と複数指定

引数に初期値(デフォルト)を設定することで
ミックスイン名後の引数に値を省略することが出来ます。

また、複数のスタイルを指定する場合は引数も複数、カンマ区切りで用意しておきます。
それらをインクルード後に適用したいプロパティ値をこれもまたカンマ区切りで代入していきます。

sass

//初期値を設定
@mixin boxSet($height: 100px,$width: 100px,$margin: 10px){
 height: $height;
 width: $width;
 margin: $margin;
}

//ミックスイン名のみで初期値の値を適応させる。
.small_size{
	@include boxSet;
	background: #008EFF;
	}

//引数に複数の値を代入することで複数のスタイルを適応。
.big_size{
	@include boxSet(300px,300px,0 25px);
	background: #FF0004;
	}

css(コンパイル後)

.small_size {
  height: 100px;
  width: 100px;
  margin: 10px;
  background: #008EFF;
}

.big_size {
  height: 300px;
  width: 300px;
  margin: 0 25px;
  background: #FF0004;
}