釣りっぽいタイトルになってますが、ようはCompassのSprite Generatorだと解決できないことをgrunt-spritesmithならやってくれるよって話です。 Compassの方については山ほど記事があるので、あまり知らないよって方はてきとーにググってください。

Compassの問題点

Sassでしか使えない

一つ目は当然ですが、CompassはSassのフレームワークなのでLessとかStylus派の人は使えないってことです。 私は最近はStylus派なので、なにか良いSpriteツールないかなーと探し始めたのが最初でした。

SassのCompileのたびにSprite化処理が実行される

これは画像が多いサイトではかなり深刻な問題となります。画像とは関係ないStyleの変更時でも毎回Sprite化が実行されるため、確認までかなりの時間をロスします。

正方形に画像を並べるとPaddingの指定が効かない

Sprite画像のサイズをできるだけ小さくしようとすると、当然正方形に近い方が望ましいといえます。が！CompassのSprite Generatorの場合正方形にするとpaddingの指定が効かず、画像どおしがくっついちゃいます。 そうするとちょっとpaddingをもたせて配置したいときとか、拡大縮小されたときに隣の画像がチラホラ見えておかしなことになります。

Retina対応わかりづらい

なんかいろんな指定方法があって正直わかりづらいと個人的には感じてます。画像サイズも手で指定しなきゃいけないし。

Compassの開発が停滞中

最近はめっきり開発が止まっちゃってますね。CSS3のmixinも不十分だし、ちょっとこれからも使っていくには不安です。ちなみにCSS3のmixinについてはbourbon入れれば一応解決できます。

だいたいぱっと思い浮かぶのはこのへんでしょうか。とくに1と2は深刻な問題ですね。

grunt-spritesmithができること

CSS, Sass, Less, Stylus, JSON形式に対応

生のCSSや各CSSプリプロセッサ、さらにはJSON形式でも出力してくれます。

• 生のCSSの場合昔ながらのGeneratorを使ったときと同じように、画像名でclassがつくられます。もちろんprefixもつけられます。

• 各CSSプリプロセッサの形式を指定した場合、画像名ごとのmixinと画像の各パラメータ(width, height, offset, 画像名, positionなど)を全て変数として出力してくれます。なのでRetina対応とかもそのへんのパラメータ使えば簡単にできます。

• JSON形式の場合もCSSプリプロセッサの形式と同じように各パラメータをJSON形式で出力してくれます。個人的にはまだ利用はしていないですが、gruntを経由してjade, js, stylusで同じJSONファイルを元に開発を行ったりできそうだなーとは思ってます。

画像が増えたときのみタスクを実行すれば良い

当然CSSプリプロセッサとは別のタスクとしてGruntの設定を行うため、Sprite画像生成とCSSプリプロセッサのCompileをわけることができます。高速Compile最高ですね。

画像を正方形に並べてpaddingもとれる

こちらは問題なく画像を正方形に並べつつ、かつpaddingも設定することができます。なのでSprite画像のサイズを最小限に抑えることができます。

使い方

サンプルをこちらに作成しましたので、よかったら試してみてください。 cloneしてnpm installしてgruntって実行すると、distフォルダに各出力結果ごとの結果が見れます。 他にもいくつかパラメータつけてるので、Gruntfile.jsと合わせて見てもらえればと思います。

結論

みんなこれで心置きなくStylusに移行できる☆彡