generare sprite con bussola con la disposizione intelligente e la spaziatura

Question

Sto cercando di generare alcuni sprite con SASS Compress dove voglio applicare il layout intelligente per il file sprite come la documentazione http://compass-style.org/help/tutorials/spriting/sprite-layouts/

Questa grande opera:

$sprites: sprite-map("sprite/*.png", $spacing: 20px); 

Ma quando aggiungo il layout si rompe; nessuna spaziatura e nessuna disposizione intelligente:

$sprites: sprite-map("sprite/*.png", $layout: smart, $spacing: 

Come posso applicare il layout intelligente allo sprite generato?

Aggiornamento Dopo qualche tempo ho avuto questo lavoro:

$sprite-spacing: 20px; 
$sprite-layout: smart; 
@import "sprite/*.png"; 
@include all-sprite-sprites; 

Ma ora non può ottenere la spaziatura per funzionare. Lo sprite è intelligente ma senza spaziature.

Answer 1

Il motivo per cui non è possibile ottenere la spaziatura per lavorare con il layout intelligente è perché il layout intelligente semplicemente non supporta la spaziatura. La spaziatura ha solo effetti sui layout orizzontale e verticale.

Detto questo, è possibile aggiungere supporto autonomamente se si è disposti a applicare il codice della bussola. Dovrai sostituire il metodo nel file layout_methods.rb, che può essere trovato a lib/compass/sass_extensions/sprites/layout_methods.rb (relativo alla directory di installazione della bussola).

Il metodo aggiornato dovrebbe essere simile a questo:

def calculate_smart_positions 
    fitter = ::Compass::SassExtensions::Sprites::RowFitter.new(@images) 
    current_y = 0     
    width = 0 
    height = 0 
    last_row_spacing = 9999 
    fitter.fit!.each do |row| 
    current_x = 0     
    row_height = 0 
    row.images.each_with_index do |image, index| 
     extra_y = [image.spacing - last_row_spacing,0].max 
     if index > 0 
     last_image = row.images[index-1] 
     current_x += [image.spacing, last_image.spacing].max 
     end 
     image.left = current_x 
     image.top = current_y + extra_y 
     current_x += image.width 
     width = [width, current_x].max 
     row_height = [row_height, extra_y+image.height+image.spacing].max 
    end 
    current_y += row.height 
    height = [height,current_y].max 
    last_row_spacing = row_height - row.height 
    current_y += last_row_spacing 
    end 
    @width = width 
    @height = height 
end 

Si noti che questo a volte potrebbe non produrre un layout ottimale, perché è solo applicando la spaziatura dopo l'algoritmo di raccordo fila ha già deciso come gli sprite sono divisi in filari. Spero che dovrebbe essere abbastanza buono per la maggior parte dei casi però.

Devo anche menzionare che non ho assolutamente nessuna esperienza di programmazione in ruby, quindi questo potrebbe essere un codice estremamente mal scritto. Sembra funzionare comunque.

Answer 2

quando si utilizza il layout intelligente, non è possibile impostare la spaziatura #718.

Ma c'è una richiesta di pull per risolvere il problema: Smart layout now considers spacing, should fix #718

Answer 3

Ecco una soluzione semplice che ho creato si comporta molto bene Check it on GitHub