Farklı stil sayfalarında aynı Pusula grafiğini kullanma

Question

CSS sprite oluşturmak için Compass kullanıyorum.

Bir kez bir sprite tanımlamak ve farklı .scss dosyaları arasında kullanmanın bir yolunu buldum, ancak bunun doğru çözüm olduğundan emin değilim. Şu ana kadar bulabildiğim

iyi yoludur:

• her .scss dosyasında _variables.scss kısmi ithal tanımlamak _variables.scss kısmi dosya içindeki sprite bir _variables.scss kısmi dosya
• oluşturmak

Örnek

_variables.scss dosyası:

$siteSprite-spacing: 20px; 
@import "siteSprite/*.png"; 

firstPage.scss dosyası:

@import "../variables.scss"; 

.close { 
    @include siteSprite-sprite(close, true); 
} 

secondPage.scss dosyası:

@import "../variables.scss"; 

.viewMore { 
    @include siteSprite-sprite(arrow, true); 
} 

Ve bu çalışır, ancak ...

Sorun şu ki, Compass scss dosyalarını (firstPage.scss, secondPage.scss) derlediğinde her defasında _variables.scss parçasını okur ve daha sonra her zaman sprite oluşturmaya çalışan tüm görüntüleri okur.

sonuç derlemek süreci bu kadar biter olmasıdır:

create generated_images/siteSprite-s526a535d08.png 
unchanged generated_images/siteSprite-s526a535d08.png 
    create css/firstPage.css 
unchanged generated_images/siteSprite-s526a535d08.png 
    create css/secondPage.css 
unchanged generated_images/siteSprite-s526a535d08.png 
    create css/thirdPage.css 
unchanged generated_images/siteSprite-s526a535d08.png 

Ve siteSprite görüntü klasörü içindeki birçok sayfa ve birçok dosyalarına sahip oldukları bu son derece yavaştır.

Bu sorunu nasıl önleyebilirim?

Answer 1

Pusula spritelarını nasıl kullandığımı açıklayacağım ve umarım bu da size yardımcı olacaktır. Genelde, tüm jenerik @ import'lar ve @ include'lar ile projem için herhangi bir genel css kodunu koyduğum bir _base.scss kısmi dosyası oluştururum. _base.scss ben de şu sprite özgü kod eklemek (benim simgeler tutmak klasör, "simge" denir varsayarak ve benim simgeleri bir .png uzantısı olup olmadığını):

@import "compass/utilities/sprites"; 
@import "icon/*.png"; 
@include all-icon-sprites; 

Bu _base.scss, projemdeki herhangi bir * .css.scss dosyasında ("firstPage.scss" ve "firstPage.scss" öğelerinizin karşılığı) ilk ithal ettiğim dosyadır. Şimdi

, bir div içindeki bu sprite herhangi birini kullanmak için, sadece bu yapın:

"myicon" "simgesi" klasörünün içindeki bir .png dosyasının adıdır

#my_id (or .my_class) { 
    @extend .icon-myicon; 
} 

.

Bu compass tutorial aslında çok yardımcıdır, bu yüzden bir göz atmak isteyebilirsiniz.

Bazı dosyaların birden çok kez içe aktarılıyor olabileceğinden endişeleniyorsanız, compass-import-once eklentisini kullanmayı deneyebilirsiniz.