CSS Sprite のための mixin

CSS Sprite を手作業で結合とかもうやってられないです。
かと言って、compass だけだと、かゆいところに手が届かないので、
最近は compass とオレオレ mixin でやってます。

<a href="https://github.com/hystking/compass-sprite">hystking/compass-sprite</a>

こんな感じで使います。

+loadSpriteAll("my-icons-directory-name", "foo")

.my-icon
  @extend %foo-filename

スプライト画像の素材を入れたディレクトリの名前を第一引数に、
第二引数に、吐き出すクラス名の接頭辞を書きます。

これで、勝手に "接頭辞-ファイル名" という名前の擬似クラスが生成されるので、
こいつを extend するだけで、使えます。

引数で、スケールやアニメーションも指定できる。末尾に "-anim" をつけた擬似クラスを extend するか、
"anim-接頭辞" という animation を読み込んで使います。

+loadSpriteAll("sprite-star", "sprite-star", $scale: 1, $animation: true, $duration: 1s)

.my-star-anim
  @extend %sprite-star
  @extend %sprite-star-anim

あと、画像のアップロード先に困ったときは、
jsdo.it というフリーの画像アップロードサイトが便利です。