@mixinの注意点

@mixinの引数を使えば簡単にボックスサイズの変更が容易になりますが
”marginは初期値のままで、paddingは違う値を入れたい"などスタイルの一部のみ変えたい(第1引数は変えずに第2引数のみ数値を変えたい)という場合は注意が必要です。

まずはわかりやすく、第一引数のみ変えたい場合。

sass

//第一引数だけを変えたい場合
@mixin boxSet($margin:30px,$padding:30px){
 margin: $margin;
 padding: $padding;
}

//第二引数は省略して書く
.size{
 @include boxSet(50px);
}

css(コンパイル後)

.size {
  margin: 50px;
  padding: 30px;
}

この様に第一引数のみ数値をいれておけば、第二引数は省略可能です。

これを先述の通りに第二引数のみ入力して、第一引数を省略(marginをそのままに）するのｎ『@include boxSet(,50px);』といった風に,(カンマ）区切りで入力するとエラーが出ます。

このように、第1引数の省略は出来ませんので、あえて初期値を入力しておくか引数の順番を変える必要があります。

box-shadowなどのように”,(カンマ)”を使うプロパティの場合

box-shadowのように、各辺に値を入れる場合は元から”,(カンマ)”を使用する物があります。
これらも、そのまま@includeするとエラーになります。

sass

@mixin shadow($value){
box-shadow:$value;
}

//↓これだとエラーになる。
.size{
 @include shadow(10px 10px 0 #999,15px 15px 0 #000);
}

これはミックスインの引数は一つしか受け渡しができないためにエラーとなります。

このエラーを回避するにはプロパティ値を文字列かリストにして渡す必要があります。

回避法（１）複数の値を更に（）丸括弧で囲んでリスト化する。

@mixin shadow($value){
box-shadow:$value;
}

.size{
 @include shadow((10px 10px 0 #999,15px 15px 0 #000));
}

回避法（２）複数の値を""(ダブルクォート)や''(シングルクォート)で囲んで文字列化する。

@mixin shadow($value){
box-shadow:$value;
}

 @include shadow(unquote("10px 10px 0 #999,15px 15px 0 #000"));

※回避法（２）の場合ですとクォテーション自体が文字列に組み込まれちゃいますので
unquote関数()*1でクォーテーションを無効化しておきます。

上記の回避法（１）、（２）はいかせん文字数が多くなり見誤りやすいくなるので
可変長引数を使ってシンプルな記述にします。

可変長引数(Variable Arquments)とは

可変長引数とは先述したとおり引数は基本1つの値しか受け渡しが出来ないという縛りがあります。
これだと不便なので引数の後に「...」ドット×３つを付け加えることで可変長引数として複数の値を
受け渡すことが出来ます。

回避法（３）

//↓$valueの後に...を付ける。
@mixin shadow($value...){
box-shadow:$value;
}

.size{
 @include shadow(10px 10px 0 #999,15px 15px 0 #000);
}

*1:値のクォテーションを削除して返します。