Sassで使う@mixinについてまとめておきます。

①@mixinとはCSSのスタイルをパッケージしておくもの

@mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。
必要な時に@mixinを呼び出すことで、まとまったスタイルを適用できます。

②@mixin基本形

@mixinでパッケージを作ります。
使うときは、@includeでパッケージを呼び出します。

[Sass]
@mixin example{
border: 1px solid #fff;
margin: 10px auto;
}
//@mixinにexampleという名前をつけました。

.box1{
@include example;
background-color: #ccc;
}
//exampleという@mixinを呼び出し、background-colorもつけました。

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
background-color: #ccc;
}
@includeで呼び出したことで、@mixin内のスタイルも適用されます。

③@mixinに引数（ひきすう）を１つ使う

このmixinにつける名前（ここではexample）に、引数を付けることができます。
引数とは、mixinパッケージの中で、使う時の都合にあわせてカスタマイズできる要素をいいます。
具体的に見てみましょう。

[Sass]
@mixin example($fsize){
border: 1px solid #fff;
margin: 10px auto;
font-size: $fsize;
}
//($fsize)が引数部分。かならず()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。

.box1{
@include example(16px);
background-color: #ccc;
}
//@includeで引数をつけてmixinを呼び出します。

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
font-size:16px;
background-color: #ccc;
}
@includeで呼び出したことで、@mixin内の引数も適用されます。

④@mixinの引数に初期値を入れる

この引数には、初期値を入れておくこともできます。
これにより、②のように指定するのと違い、使う側で変更ができるようになり、使い勝手が良くなります。

[Sass]
@mixin example($fsize:16px){
border: 1px solid #fff;
margin: 10px auto;
font-size: $fsize;
}
//($fsize)が引数部分。かならず()で囲み、$で始めます。パッケージの中に、css記述を書いておきます。

.box1{
@include example();　　
background-color: #ccc;
}
.box2{
@include example(20px) 
background-color: #ccc;
}
box1は引数の初期値をそのまま使い、box2は使う側の都合で20pxとする場合です。

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
font-size:16px;
background-color: #ccc;
}
.box2{
border: 1px solid #fff;
margin: 10px auto;
font-size:20px;
background-color: #ccc;
}

⑤@mixinの引数は複数入れることができる

この引数は、複数いれることもできますし、それぞれに初期値を指定することもできます。

[Sass]
@mixin example($fsize:16px, $color:#fff){
border: 1px solid #fff;
margin: 10px auto;
font-size: $fsize;
color:$color
}
//複数の引数を作る場合は、カンマで区切ります。

.box1{
@include example($color:$f00);
background-color: #ccc;
}

[CSSでの表記]
.box1{
border: 1px solid #fff;
margin: 10px auto;
font-size:16px;
color:#f00;
background-color: #ccc;
}
// 引数のうち、文字色(color)のみ変更されています。