Image Sprite Compass

Salah satu alasan kenapa saya suka menggunakan compass yaitu fasilitas-fasilitas yang mempercepat waktu pekerjaan saya, salah satunya adalah image sprite. Yaitu menggabungkan beberapa file menjadi satu file, ini tentu lebih mengurang beban website memanggil satu file gambar daripada banyak file yang cendrung memperlambat waktu brosing kita!

Di laptop saya sudah terinstall ruby, sass, dan compass jadi saya langsung memulai project compass dengan mengetikan diterminal

#membuat dokumen compass baru
compass create

Saya sisipkan satu folder yang berisi beberapa icon yang nantinya akan saya gabung dengan fasilitas images-sprites compass, berikut strukturnya :

.
├── config.rb
├── images
│   └── spr
│       ├── behance.png
│       ├── facebook.png
│       ├── github.png
│       └── google.png
├── index.html
└── sass
    ├── ie.scss
    ├── print.scss
    └── screen.scss

Untuk menggabungkan icon yang ada di dalam direktori spr maka saya sisipkan

@import "spr/*.png";  

baris diatas akan mengambil semua file dalam folder spr kemudian secara otomatis akan terbentuk sebuah file seperti dibawah ini :

└── images
    ├── spr
    │   ├── behance.png
    │   ├── facebook.png
    │   ├── github.png
    │   └── google.png
    └── spr-sc504b03880.png

untuk memanggil file spr-sc504b03880.png diatas, saya hanya perlu menyisipkan nama gambar png yang ada pada direktori images maka secara otomatis gambar yang saya inginkan akan muncul

li{
	&.facebook{
		@include spr-sprite("facebook");
	}
	&.behance{
		@include spr-sprite("behance");
	}
	&.github{
		@include spr-sprite("github");
	}
	&.google{
		@include spr-sprite("google");
	}
}

Saya tidak perlu lagi repot dan pusing dengan angka koordinat gambar yang menyita banyak waktu saya, kerja saya pun menjadi semakin cepat.

lihat demo
download source

rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo