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

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

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

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
@mixin box_shadow($value: 0px 0px 10px #88aa88) {
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
	    -ms-box-shadow: $value;
	        box-shadow: $value;
}

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

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
@mixin box_shadow(
    $value_num: 5,
    $value1: 0px 0px 10px #88aa88,
    $value2: 0px 0px 10px #88aa88,
    $value3: 0px 0px 10px #88aa88,
    $value4: 0px 0px 10px #88aa88,
    $value5: 0px 0px 10px #88aa88) {
	// value_numの回数だけ、box-shadowを指定する
}

// 2回box-shadowを指定する
@include box_shadow(2, 0px 0px 10px #88aa88, 0px 0px 10px #88aa88);

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

可変長引数を使う

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

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
@mixin box_shadow($value...) {
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
	    -ms-box-shadow: $value;
	        box-shadow: $value;
}

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

// パラメータ
$one_grid:                30px;
$all_grid_partition_num:  20;

// サイズ
$container_width:        $all_grid_partition_num * $one_grid;

// design
$main_color:         #B7EA99;
$sub_color:          #ECFCE2;

/*----------------------------------------------------------
角丸
----------------------------------------------------------*/
@mixin border_radius($value: 20px) {
	-webkit-border-radius: $value;
	   -moz-border-radius: $value;
	    -ms-border-radius: $value;
	        border-radius: $value;
}

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
@mixin box_shadow($value...) {
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
	    -ms-box-shadow: $value;
	        box-shadow: $value;
}

/*----------------------------------------------------------
マークアップ
----------------------------------------------------------*/
body {
    background-color: $main_color;
}
div#container {
    background-color: $sub_color;
    width: $container_width;
    margin: auto;
    margin-top: $one_grid;
    
    // 角丸
    @include border_radius();
    
    // シャドウ
    @include box_shadow(0px 0px 10px #88aa88, 2px 6px 10px #88aa88);
    
    // 内容がないので高さを指定する
    height: 10 * $one_grid;
}

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

可変長引数の詳細

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