sprites logo imagenes game cow css3 compression sass sprite

css3 - logo - sprites png



Genera sprites con brújula con diseño y espaciado inteligentes (3)

Aquí hay una solución simple que he creado que funciona muy bien. Verifíquelo en GitHub.

Intento generar algunos sprites con SASS Compress donde deseo aplicar el diseño inteligente al archivo sprite como los documentos http://compass-style.org/help/tutorials/spriting/sprite-layouts/

Esto funciona genial:

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

Pero cuando agrego diseño, se rompe; sin espacio y sin diseño inteligente:

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

¿Cómo puedo aplicar el diseño inteligente al sprite generado?

Actualización Después de un tiempo, esto funcionó:

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

Pero ahora no puedo hacer que el espaciado funcione. El sprite es inteligente pero sin espacios.

La razón por la que no puede obtener espacio para trabajar con el diseño inteligente es porque el diseño inteligente simplemente no admite espaciado. El espaciado solo tiene algún efecto en los diseños horizontal y vertical.

Dicho esto, puede agregar soporte usted mismo si está dispuesto a aplicar un parche al código de la brújula. Tendrá que reemplazar el método calculate_smart_positions en el archivo layout_methods.rb , que se puede encontrar en lib/compass/sass_extensions/sprites/layout_methods.rb (relativo al directorio de instalación de la brújula).

El método actualizado debería verse así:

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

Tenga en cuenta que esto a veces puede no producir un diseño óptimo, ya que solo se aplica el espaciado una vez que el algoritmo de ajuste de fila ya ha decidido cómo se dividen los sprites en filas. Sin embargo, afortunadamente debería ser lo suficientemente bueno para la mayoría de los casos.

También debo mencionar que tengo esencialmente cero experiencia de programación en ruby, por lo que este puede ser un código extremadamente mal escrito. Sin embargo parece funcionar.