【アウトプット㊺】-Sass- ミックスインの引数に初期値を定義する

毎回値を定義するのは手間がかかるので、頻繁に使う値を引数の初期値として定義しておくと、初期値を変えたいときだけ値を書けば済むようになる。

▼SASS

//引数を使ったミックスインを定義する
＠mixin box ($value: 3px) {
   padding: $value;
   background: #999;
   color: white;
}

//定義したミックスインを呼び出す
.note {
   @include box;
}

.noteA {
   @include box();
}

▼CSS

.note {
   padding: 3px;
   background: #999;
   color: white;
}
.noteA {
   padding: 3px;
   background: #999;
   color: white;
}

引数の初期値を定義したことで@includeでミックスインを呼び出す際に、その都度値を書かなくてもよくなる。
初期値の定義している場合は、「@include box;」でも、「@include box();」でもどちらでも可能。

引数を複数指定する

▼SASS

//引数を使ったミックスインを定義する
＠mixin box ($margin: 30px 0, $padding: 10px 0) {
   margin:$margin;
   padding: $padding;
}
.note {
   @include box;
   border: 1px solid #ccc;
}
.item {
   @include box(0 0 50px, 20px);
   background: #eee;
}

▼CSS

.note {
   margin: 30px 0;
   padding: 10px 0;
   border: 1px solid #ccc;
}
.item  {
   margin: 0 0 50px;
   padding: 20px;
   background: #eee;
} 

.noteでは初期値がそのまま適用され、.itemでは初期値を上書きしてmarginとpaddingの値が適用された。

引数を複数指定しているとき、どちらか一方の値を変更したい

★第一引数だけ値を変更する

.item  {
   @include box(0 0 50px);
   background: #eee;
}

第一引数を変更する場合は、第二引数を省略して書けばOK！

★第二引数だけ値を変更する

.item {
   @include box($padding: 10px 0);
   background: #eee;
}

カンマを使用するプロパティには可変長引数を使用する

CSSにはプロパティによってはカンマを使用するものがある。
例）text-shadow, box-shadow
これらを値としてそのまま使うとエラーになってしまうので、以下のようなコードを書く必要がある。

▼SASS

//引数を使ったミックスインを定義する
＠mixin box ($value) {
   text-shadow: $value;
}
.note {
   @include box((8px 8px 0 #999, 15px -10px 0 #eee));
}

//または

.note {
   @include box(unquote("8px 8px 0 #999, 15px -10px 0 #eee"));
}

▼CSS

.note {
   text-shadow:8px 8px 0 #999, 15px -10px 0 #eee;
}

text-shadoeの値をカンマ区切りで複数指定するとエラーになってしまうので、複数の値を()で囲うか、””で囲って文字列にする必要がある。
※””で囲うとコンパイルした時にそのまま残ってしまうのでunquote関数でクォーテーションを削除する必要がある。

カンマ区切りで複数指定をするとエラーになるのか。。

ミックスインには引数1つにつき1つの値しか渡すことができないので、カンマ区切りを使うと渡した値が複数になってしまうため、エラーになってしまうのが原因。

可読性をもっと上げるためには。。

引数の数を固定しないようにする可変長引数を使用すれば、複数指定をすることができる。
可変長引数は、引数の後に「…」と書けばOK!

＠mixin box ($value…) {
   text-shadow: $value;
}
.note {
   @include box(8px 8px 0 #999, 15px -10px 0 #eee);
}

//または

.note {
   @include box(8px 8px 0 #999, 15px -10px 0 #eee);
}