以前に、「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」にて可変長引数を使用した@mixin化を進めてきました。しかし、実はこのままでは問題があるのです。その可変長引数の問題とは「引数を指定しないとコンパイルエラーになる」です。引数を指定しないでも動作するよう汎用性を持たせていきましょう。

「Sassの可変長引数で出来ること出来ないことまとめ」について

「Sassの可変長引数で出来ること出来ないことまとめ」にて、可変長引数を使う際に気をつけることや、問題を回避するテクニックを書きました。これを利用してみましょう。「Sassの可変長引数で出来ること出来ないことまとめ」の概要は以下になります。

可変長引数にデフォルト引数が使用できない

可変長引数に対してデフォルト引数を指定できません。

@mixin mixinTestValiable($value... : 0) {
    // コンパイルエラー
}

可変長引数を利用していると、可変長引数以外の引数に対してもデフォルト引数が使えなくなります。

@mixin mixinTestValiable($value1: 0, $value2...) {
    // コンパイルエラー
}

空のデータを受け取れるようにするテクニック

以下のように、length()関数を利用すれば空のデータを受け取ったのか判別できます。そのテクニックを利用したのが以下の便利な関数です。

@function existed($value...) {
    @if(length($value) == 0) {
        @return false;
    }
    @else {
        @return true;
    }
}

実際に使った例は以下になります。

$DEFAULT_mixinTestValiable: 0 !default;
@mixin mixinTestValiable($value...) {
    @if(not existed($value...)) {
        $value: $DEFAULT_mixinTestValiable;
    }
    // 以下処理が続く
}

「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」に応用する

では、existed()関数を利用するようにbox-shadow()関数を書き換えてみましょう。

/*----------------------------------------------------------
可変長引数が空の値を受け取ったか判別する
----------------------------------------------------------*/
@function existed($value...) {
    @if(length($value) == 0) {
        @return false;
    }
    @else {
        @return true;
    }
}

/*----------------------------------------------------------
シャドウ
----------------------------------------------------------*/
$DEFAULT_box-shadow: 0px -10px 10px #ff0000, 10px 10px 10px #00ff00, -10px 10px 10px #0000ff !default;
@mixin box-shadow($value...) {
    @if(not existed($value...)) {
        $value: $DEFAULT_box-shadow;
    }
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
	    -ms-box-shadow: $value;
	        box-shadow: $value;
}

この記事の内容で、以下のようなマークアップができるようになります。

div#test {
    // シャドウ(空の指定であることに注目！)
    @include box-shadow();
}

こうすることで、デフォルトの影を落とすことができるようになりました。当然ですが、ベンダープレフィックスはデフォルトの値でちゃんとCSSになっています。段々と、ライブラリのような処理の書き方が増えてきましたね。実験で分かったテクニックをどんどん載せていこうと思いますので、是非参考にしてみてください。