Compass ile CSS Image Sprite Oluşturma

DexMa · 18 Mar 2021

CSS Image Sprite, HTTP isteklerini azaltmak ve web yükleme performansını optimize etmek için birkaç görüntüyü tek bir görüntü dosyasında birleştirme yöntemidir . Bunu yapmanın birçok yolu ve kullanışlı aracı vardır, yoksa bunu geleneksel olarak Photoshop ile de yapabilirsiniz.

Ancak, CSS Image Sprite ile ilgili tüm deneyimlerime rağmen, Pusula için Sprite İşlevini kullanmaktan çok daha kolay bir yol yok . Öyleyse, nasıl çalıştığına bir bakalım.

Pusulayı Başlatma

Compass kodları ile çalışmaya başlamadan önce Compass projesi oluşturmamız gerekiyor. Bu nedenle, görüntüler ve .scssCompass dahil olmak üzere projede her değişiklik olduğunda , uygun formda derleyecektir.

Terminalinizi veya Komut İstemi'nizi (Windows'taysanız) açalım ve aşağıdaki komutları çalıştıralım.

1
2
3

compass create /path/to/project
cd /path/to/project
compass watch

Görüntüleri Birleştirme

Yukarıda bahsettiğimiz gibi, görüntüleri manuel olarak birleştirmek için Photoshop'u kullanabilir veya SpriteBox gibi bazı kullanışlı araçları da kullanabilirsiniz . Pusula, bu özelliği İşleve entegre eder. Diyelim ki images / tarayıcılar / <images> .png klasörleri altında aşağıdaki simgelere sahibiz .

Bu simgeleri Compass'ta birleştirmek için, @importkuralı kullanabilir ve ardından bunu resim klasörlerine yönlendirebiliriz ve ardından .scssstil sayfası aracılığıyla resim uzantısına yönlendirebiliriz.

1	@import "browsers/*.png";

Dosyayı kaydettikten sonra, Compass bu görüntüleri birleştirecek ve aşağıdaki gibi yeni görüntü dosyaları oluşturacaktır.

Düzen Yönü

Ayrıca, hareketli grafik yönünü de ayarlayabiliriz. Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, görüntüler varsayılan olarak dikey olarak düzenlenmiştir. Vaka dikey yönlendirme durumları uymuyor, biz şu değişkenle yatay veya çapraz onları yönlendirebilirsiniz $<map>-layout: horizontal;veya $<map>-layout: horizontal;değiştirin <map>görüntüleri kaydedilmiş klasör adıyla.

Yatay

1 2	$browsers-layout:horizontal; @import "browsers/*.png";

Diyagonal

1 2	$browsers-layout:vertical; @import "browsers/*.png";

Stil Sayfasına Resim Ekleme

Resmi birleştirmeyi bitirdikten sonra, resmi stil sayfasına arka plan resmi aracılığıyla ekleriz. Geleneksel olarak bunu bu şekilde yapacağız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.chrome {
background-position: 0 0; width: 128px; height: 128px;
}
.firefox {
background-position: 0 -133px; width: 128px; height: 128px;
}
.ie {
background-position: 0 -266px; width: 128px; height: 128px;
}
.opera {
background-position: 0 -399px; width: 128px; height: 128px;
}
.safari {
background-position: 0 -532px; width: 128px; height: 128px;
}

Compass'ta çok daha basit birkaç yolumuz var. İlk olarak, bu sözdizimi ile bu CSS kuralları gibi bir şey oluşturabiliriz @include all-<map>-sprites;. <map>Görüntüleri sakladığımız klasörlerle değiştirin .

1	@include all-browsers-sprites;

Normal CSS'ye derlendiğinde yukarıdaki bu satır, aşağıda gösterildiği gibi, arka plan görüntüsü tanımının yanı sıra konumların her birini oluşturur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {
background: url('/images/browsers-sad8e949931.png') no-repeat;
}
.browsers-chrome {
background-position: 0 0;
}
.browsers-firefox {
background-position: 0 -128px;
}
.browsers-ie {
background-position: 0 -256px;
}
.browsers-opera {
background-position: 0 -384px;
}
.browsers-safari {
background-position: 0 -512px;
}

Veya, bu sözdizimi ile belirli seçicilere ayrı ayrı arka plan görüntüsü de ekleyebiliriz @include <map>-sprite(image-naem);; önceki kodlarda olduğu gibi, <map>bu görüntüleri sakladığımız klasörle değiştirin . İşte bir örnek.

1
2
3

li {
@include browsers-sprite(safari);
}

Ardından, Compass, açıkça belirtmemize gerek kalmadan arka plan konumunu belirleyecek kadar akıllıdır. Normal CSS'de, yukarıdaki satır,

1
2
3
4
5
6

.browsers-sprite, li {
background: url('/images/browsers-sad8e949931.png') no-repeat;
}
li {
background-position: 0 -512px;
}

Kapsayıcı Boyutunu Belirtme

Yapmamız gereken son şey, kabı heightve widthgörüntüyü içeren alanı belirtmektir . Bunu genellikle görseli manuel olarak inceleyerek widthve height(büyük olasılıkla görüntü bilgisi veya görüntü özellikleri aracılığıyla ) geleneksel şekilde yaparız .

Compass ile bu işlevi kullanabilir <map>-sprite-height(image-name)veya <map>-sprite-width(image-name)görüntü genişliğini ve yüksekliğini alabiliriz. Bu örnekte, görüntünün birini alır widthve heightve iyi ile arka plan resmi atamak olarak değer değişkenleri saklamak @includedirektifi.

1
2
3
4
5
6
7
8

$height: browsers-sprite-height(safari);
$width: browsers-sprite-width(safari);
li {
display: inline-block;
height: $height;
width: $width;
@include browsers-sprite(safari);
}

Yukarıda bu kodları derlediğimizde normal CSS'de şu hale geliyor.

1
2
3
4
5
6
7
8
9

.browsers-sprite, li {
background: url('/images/browsers-sad8e949931.png') no-repeat;
}
li {
display: inline-block;
height: 128px;
width: 128px;
background-position: 0 -512px;
}

Sonuç

Aslında Compass'ın kullanabileceği birkaç başka yararlı işlev vardır, ancak bunlar Compass ile CSS Görüntü Sprite oluşturmak için gerekli tüm işlevlerdir. Yine de bu konuya aşina değilseniz, Sass ve Compass ile ilgili önceki yazı dizimizi takip etmenizi tavsiye ederiz . Bu gönderiyi faydalı bulacağınızı umuyoruz.