1.ミックスインの基本
ミックスインの機能はスタイルの集まりを定義しておき、それを他の場所で呼び出して使うことができるというものです。
Sass
//ミックスインを定義
@mixin main{
padding:15px;
background:#999;
color:white;
}
ミックスインは、@mixinの後に半角スペースを空けて任意のミックスイン名を定義します。そして、｛～｝（波括弧）内にスタイルを書いていきます。
定義したミックスインを呼び出す際は、「@include ミックスイン名；」と書きます。
Sass
//定義したミックスインを呼び出し
.button{
@include main;
}
CSS(コンパイル後)
.button{
padding:15px;
background:#999;
color:white;
}
ミックスインはこのように「@mixin」と「@include」をセットで使います。
2．引数を使ったミックスイン
Sass
//引数を使ったミックスインを定義
@mixin card($value){
border-radius: $value;
}
引数を使う場合、ミックスイン名の直後に（）（丸括弧）を書き、括弧内に引数（変数）を書きます。
Sass
.item{
@include card(2px);
background:#eee;
}
CSS(コンパイル後)
.item{
border-radius:2px;
background:#eee;
}
ミックスインはこのように、値の一部を変えて使い回すことができます。