Sassを使えばbox-shadowのベンダープレフィックスコピペが要らない!
はてなブックマーク - Sassを使えばbox-shadowのベンダープレフィックスコピペが要らない!
Pocket

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

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

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

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

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

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

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

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

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

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

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

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

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