【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。

未だに9月くらいの気がしているhakoishiです。 おかしい...街がクリスマスとか、正月とか、なんか浮き足立った事言ってる。 さて、今回はSassでスプライト対応する時にCompassを使わないサンプルをご紹介。 Compassのスプライト、すっごく便利なんですよね。 けれど、実案件では使えない場合もあるのではないでしょうか。 画像名を決まったものにしたい、とか。 画像の並びをソースと同じ順にしたい、とか。 納品後、お客さまが更新していく案件では少なくなさそうです。 そんなときの為に、@forを使う方法をば。 サンプル サンプル 恐ろしくざっくりしたサンプルですが...。hoverでの画像切り替え有りです。 使っている画像がこちら。 上に8pxの余白を設けています。理由は後ほど。 HTML 画像置換の為、li>a>spanの入れ子にしています。 <ul class="sprite-li

[bashalog]

書きました。SassでスプライトのCompassじゃないやつ。