SASSと、そのフレームワークであるCompassを使ってテキストに影を付けようとしたときの話です。

テキストに影を付けたい場合、Compassが提供しているmixinsingle-text-shadowを使えばチョチョイのチョイだと思っていたのですが、公式リファレンスを見ながら使ってみたものの影が付かない。

そのリファレンスでは以下のように使えと書いてあります。

single-text-shadow($hoff, $voff, $blur, $spread, $color)

引数の順番は

1. 横方向のずれ
2. 縦方向のずれ
3. ぼかし具合
4. 広がり具合
5. 色

でしょうか。

しかし、実際に使うときは以下のようにしなければ影を付けられません。

.shadow {
    @include single-text-shadow(rgba(0, 0, 0, 0.5), 1px, 1px, 6px);
}

引数の渡し方は

1. 色
2. 横方向のずれ
3. 縦方向のずれ
4. ぼかし具合

になります。

「spread」の引数指定が必要なくなり、色の引数は一番最初に持ってきます。（そもそもCSS3のtext-shadowって「spread」の値指定は無いですよね）これでsingle-text-shadowは難なく使えるようになります。

（2014年5月30日現在）バージョンの関係かと思いましたが、結構前から同じく引数の順番が違っていて、先週開発環境を整えて最新バージョンにしたばかりでも同じく上手く扱えなかったのでリファレンスが間違っている可能性が高いです。