Kompas: generowanie Sprites, a także szerokość/wysokość na każdym obrazku w ikonce

Question

Używam Compass (struktura CSS) do generowania obrazów sprite. Działa, ale kompas generuje tylko położenie w tle dla każdego obrazu.

Czy można uzyskać szerokość i wysokość każdego obrazu w ikonce?

To jest mój kod:

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

Wygenerowany kod:

.ico-sprite, .ico-bag-blue, .ico-bag-black { 
    background: url('../images/ico-s78b1a1919b.png') no-repeat; 
} 

.ico-bag-blue { 
    background-position: 0 0; 
} 

.ico-bag-black { 
    background-position: 0 -24px; 
} 

I kod chciałbym posiadać:

.ico-sprite, .ico-bag-blue, .ico-bag-black { 
    background: url('../images/ico-s78b1a1919b.png') no-repeat; 
} 

.ico-bag-blue { 
    background-position: 0 0; 
    width:40px; 
    height:24px; 
} 

.ico-bag-black { 
    background-position: 0 -24px; 
    width:44px; 
    height:30px; 
} 

Czy ktoś może mi wyjaśnić, w jaki sposób mogę to zrobić? Dzięki.

Answer 1

to działa:

@include all-<map>-sprites(true); 

Ale może warto rozważyć udokumentowany sposób za pomocą zmiennych konfiguracyjnych:
http://compass-style.org/help/tutorials/spriting/

Wystarczy określić zmienną config przed importem. W twoim przypadku:

$ico-sprite-dimensions: true; 
@import "ico/*png". 
@include all-ico-sprites; 

Wysyłanie true do wszystkich to działa, ale jak to nieudokumentowane, wydaje się, że zmienne konfiguracyjne są preferowaną metodą.

Oprócz wymiarów są inne zmienne konfiguracyjne dostępne:

$<map>-spacing   // space in px around the sprites 
$<map>-repeat   // whether to repeat the sprite bg 
$<map>-position   // the x position of the sprite on the map 
$<map>-sprite-base-class // the base class (default ".<map>-sprite") 
$<map>-clean-up   // whether to delete old image maps 
$<map>-<sprite>-spacing // spacing, for individual sprites 
$<map>-<sprite>-repeat // repeat, for individual sprites 
$<map>-<sprite>-position // position, for individual sprites 

Answer 2

Znalazłem rozwiązanie. Po prostu podaj true jako drugi argument:

@include all-ico-sprites(true); 

Po prostu.