ミックスインでカンマを使うプロパティを指定する時
ミックスインを使う時、カンマを使うプロパティで値を指定すると、引数の複数指定と間違われて困るので可変長引数( @mixin
の $value
の後に ...
を追加)を指定してあげることで引数の複数指定と間違われずにエラーを回避できる。
コンパイル後の CSS が #000
=> black
, #fff
=> white
ってなってるのが気になった。
@mixin text-shadow($value...) { text-shadow: $value; } .test { @include text-shadow(1px 1px 0 #000, 2px 2px 0 #fff); }
.test { text-shadow: 1px 1px 0 black, 2px 2px 0 white; }
他のやり方では $value
内の指定を リストにするとか文字列にすることで、同じようにエラーを回避できる。
文字列にした場合、コンパイル後の CSS は #000
,#fff
そのままだな。
/* Sass */ @mixin text-shadow($value) { text-shadow: $value; } .test { @include text-shadow((1px 1px 0 #000, 2px 2px 0 #fff)); } .test { @include text-shadow(unquote("1px 1px 0 #000, 2px 2px 0 #fff")); }
/* CSS */ .test { text-shadow: 1px 1px 0 black, 2px 2px 0 white; } .test { text-shadow: 1px 1px 0 #000, 2px 2px 0 #fff; }