[HTML|JS|CSS] Compass : Sprites

Projektując strony internetowe mamy często do czynienia ze sporą ilością małych obrazków, będących np. zawartością kontrolek, służących do nawigacji itd. Aby nie ładować przy każdym odświeżeniu strony wszystkich obrazków, możemy skorzystać z tzw. sprite'ów. Wszystkie obrazki danego typu zostaną połączone w jeden, zatem potrzebne będzie jedna operacja pobierania, a dodatkowo utworzone zostaną style z background image dla każdego z obrazków.

Na przykład, mając w folderze arrows obrazki arr1.png, arr2.png, arr3.png, arr4.png możemy utworzyć dla nich sprite'y.

W pliku scss.

@import "arrows/*.png";
@include all-arrows-sprites;

Resztą zajmie się Compass. Po transformacji:

.arrows-sprite, .arrows-arr1, .arrows-arr2, .arrows-arr3, .arrows-arr4 {
  background: url('/images/arrows-sfa8d0f7a28.png') no-repeat;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr1 {
  background-position: 0 -64px;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr2 {
  background-position: 0 0;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr3 {
  background-position: 0 -128px;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr4 {
  background-position: 0 -192px;
}

Uwaga. Folder arrows powinien znajdować się w folderze z obrazkami (w tym przypadku images). Ścieżka do tego folderu ustawiana jest w pliku Config.rb.

To nie koniec możliwości, możemy ustawić kilka opcji dotyczących składania obrazków w jeden. Opcje te ustawiamy, tworząc odpowiednie zmienne przed instrukcją importowania. Aby ustawić odstępy między obrazkami należy podać:

$arrows-spacing : 30px;

Gdzie arrows to nazwa folderu z obrazkami.
Możemy także wybrać layout obrazków ustawiając zmienną $arows-layout. Obrazki możemy ustawić m.in. pionowo lub diagonalnie. Jest też do dyspozycji layout typu smart, gdzie rozmieszczenie jest dobierane tak, aby zminimalizować ilość miejsca.
Kolejną interesującą opcją jest możliwość podmiany obrazka w momencie najechania myszą. Cała transformacja odbywa się poprzez konwencję. Aby np. dla obrazka o nazwie img1.png dodać jego zamiennik w momencie najechania myszą, wystarczy do tego samego folderu dodać obrazek o nazwie img1_hover.png. Resztą zajmie się Compass.