css3 - logo - sprites png

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

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

cuando se usa diseño inteligente, el espaciado no se puede establecer # 718 .

Pero hay una solicitud de extracción para resolver el problema: el diseño inteligente ahora considera el espaciado, debería arreglar # 718