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

css, Sass

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

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

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

今回はSNSボタンを作ってみたいと思いますので、とりあえずFacebook、Google+、Twitterのアイコンを調達してきます。
利用させていただいたのは「Graphic Resources SL.」です。
icon
この画像をimagesフォルダの中にiconフォルダを作って、そこに入れておきます。
※iconフォルダじゃなくても大丈夫です。
※imagesフォルダはconfig.rbで指定してる画像フォルダにしてください。

Compassで画像を合体

Sass
1
2
@import "compass";
@import "icon/*.png"; /* 元の画像が入っているフォルダ名（icon） */

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

CSS
1
2
3
4
.icon-sprite {
  background-image: url('../images/icon-s3dfad84db6.png');
  background-repeat: no-repeat;
}

こんなCSSがコンパイルされるのと同時に「icon-数字やアルファベット.png」がimagesフォルダにできてます。
imagesフォルダ内
ねっ。すげーでしょ？
それからそれから次の1行を追加すると

Sass
1
@include all-icon-sprites;

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

CSS
1
2
3
4
5
6
7
8
9
10
11
.icon-facebook {
  background-position: 0 0;
}
 
.icon-google {
  background-position: 0 -32px;
}
 
.icon-twitter {
  background-position: 0 -64px;
}

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

あとはhtmlとCSSを書いて

html

Default
1
2
3
<a href="#" class="icon-facebook">facebook</a>
<a href="#" class="icon-google">google+</a>
<a href="#" class="icon-twitter">Twitter</a>

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

CSS

CSS
1
2
3
4
5
6
7
8
a {
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    float: left;
    margin-right: 3px;
}

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

まとめ

便利ですねー
楽ですねー

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

, , , 下山 光揮

スポンサーリンク