compassで画像をbase64にする

普段、画像のbase64化には こちらのツール をつかっていましたが、最近compassに任せることができることを知りました。

http://blog.thingslabo.com/archives/000058.htmlblog.thingslabo.com

記述方法

SCSS

background-image: inline-image("画像のパス");

これでOKです。

これを応用して、テキストを背景画像に置換し、さらにbase64に変換するmixinもつくりました。

mixin

SCSS

@mixin replaceImg($imgPath) {
    display: block;
    width: image-width($imgPath); height: image-height($imgPath);
    background: inline-image($imgPath) center center no-repeat;
    text-indent: -9999px;
}

非常に便利です。