一番使い勝手が良さそうな、mixin（ミックスイン）について。
基本の使い方
使いまわすスタイルをまとめておいて、使いたいシーンでインクルードすることができる。まずは実例。
@mixin basicSet {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.wrap {
@include basicSet;
}コンパイルするとこうなる。
.wrap {
font-size: 1.2rem;
margin-bottom: 2rem;
}よく使うスタイルを1か所でまとめておけるので、管理コストが低減する。
なんと引数をとることができる
mixinでは、メソッドや関数のように引数をとることができる。
@mixin basicText($height, $style, $color: green) {
font-size: 1.2rem;
margin-bottom: 2rem;
border-bottom: $height $style $color;
}
.pragraph {
@include basicText(2px, solid, );
color: red;
}ボーダー（下）に対して引数を設定する。呼び出しの際に、引数を定義した通りに記述すると…
.pragraph {
font-size: 1.2rem;
margin-bottom: 2rem;
border-bottom: 2px solid green; /* 初期値greenが出力された */
color: red;
}すごい！便利！
また、3つ目の引数で指定しているように定義時に初期値を設定しておくこともできる。値が空だった場合は、指定された初期値が使用される。
実務ではmixin.scssを分けておき、基本パーツをそこに一式定義しておくといった形で使用される（らしい）。継続案件が多い場合はそれが良さそうだが、単発系の場合は構造で分けたscssの上部にまとめておくのが分かりやすい気がする。
参考文献
