mixinとinclude

概要

SCSSにはmixinという機能が存在する。
mixinとはSCSS用のコンポーネントのことであり、別の場所から呼び出すことのできるプログラムを作成することができる。
定義はmixinで行い、呼び出しはincludeで行う。

以下にコード例を示す。

@mixin mixin名 {
	...
}
 
div{
	@include mixin名
}

mixinでは引数を使用することができる。
以下にコード例を示す。

@mixin sample($color: red){
	color: $color
}

この例ではsampleというmixinを作成している。
ここではデフォルト引数としてredを指定している。

呼び出す場合には以下のようになる。

div{
	@include sample(blue);
}