[Sass,Compass,CSS]Compassで爆速CSSスプライトでSNSボタンでも作っちゃうよ！

CSSスプライト・・・それシュワシュワなの？（とりあえず定番ボケは忘れずに）

ということでCompassでCSSスプライトをやってみようと思います。
ページ読み込みスピード改善のためにCSSスプライトやってやろうじゃないか！と意気込むで手動でセコセコやっちゃうと骨が折れますよね。
そこでCompass使うと一瞬でできちゃいます！

CSSスプライトで使用する画像を用意する

今回はSNSボタンを作ってみたいと思いますので、とりあえずFacebook、Google+、Twitterのアイコンを調達してきます。
利用させていただいたのは「Graphic Resources SL.」です。

この画像をimagesフォルダの中にiconフォルダを作って、そこに入れておきます。
※iconフォルダじゃなくても大丈夫です。
※imagesフォルダはconfig.rbで指定してる画像フォルダにしてください。

Compassで画像を合体

↓↓↓　コンパイル後　↓↓↓

こんなCSSがコンパイルされるのと同時に「icon-数字やアルファベット.png」がimagesフォルダにできてます。

ねっ。すげーでしょ？
それからそれから次の1行を追加すると

↓↓↓　コンパイル後　↓↓↓

わお！座標を自動で取得してpositionしてくれてるじゃないですか！

あとはhtmlとCSSを書いて

html

html適当でごめんなさい・・・

CSS

以上でそれっぽいものの出来上がり。
※htmlとCSSは適当に書き換えてください。

まとめ

便利ですねー
楽ですねー