Sassでbox-shadowを@mixin化する – 可変長引数を使おう
はてなブックマーク - Sassでbox-shadowを@mixin化する – 可変長引数を使おう
Pocket

以前に記載した、「Sassで角丸の矩形を超簡単に記述する方法」をForkして、影を落とすbox-shadowにも対応してみましょう。では実際に動いているものを見てみます。

box-shadowをとにかく@mixin化する

今まで対応してきたCSSの機能は、@mixinの引数により汎用性を高めてきました。しかし、今回のbox-shadowはそう簡単にいきません。box-shadowは連続して複数の影を指定することができるためです。今まで見てきた方法で@mixin化してみたソースは以下のようになるかと思います。

このままでは、複数の影は指定できませんね。では以下のようにしてみるのはどうでしょうか。

一応、上記の方法でも用意した引数の数である5回までであれば対応することができます。汎用性も以前のソースよりは幾分マシかと思います。しかし醜い(見にくい)ソースですね……。

可変長引数を使う

可変長引数とは、引数の数に縛られることなく引数を指定することができるという機能です。実際に使ってみたソースを見てみましょう。

ハイライトしている4行目の、引数の指定方法に注目してください。「…」という見慣れない指定がされています。これが可変長引数の指定方法です。この機能を利用することで複数の影の指定を記述することができるようになります。使用している例は以下になります。

このように、2つの影の指定ができるようになりました。この可変長引数の機能により、ほぼ全てのCSSのプロパティをカバーできるようになるのではないでしょうか。どんどん便利に楽になりますね!

可変長引数の詳細

2012年8月10日にSassが大型アップデートを行い、バージョンが3.2.0となりました。詳細はSassのチェンジログを参照してください。この3.2.0へのアップデートで可変長引数がサポートされています。また、現在2012年8月29日時点では3.2.1が最新となっています。もしコンパイルエラーが発生するようでしたらSassのバージョンアップを行なってください。