Generate sprites with compass with smart layout and spacing

Question

I'm trying to generate some sprites with SASS Compress where I want to apply the smart layout to the sprite file like the docs http://compass-style.org/help/tutorials/spriting/sprite-layouts/

This works great:

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

But when I add layout it breaks; no spacing and no smart layout:

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

How can I apply the smart layout to the generated sprite?

Update After some time I got this to work:

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

But now I can't get the spacing to work. The sprite is smart but with no spacing.

Answer 1

The reason you can't get spacing to work with the smart layout is because the smart layout simply doesn't support spacing. Spacing only has any effect on the horizontal and vertical layouts.

That said, you can add support yourself if you're willing to patch the compass code. You'll need to replace the calculate_smart_positions method in the layout_methods.rb file, which can be found at lib/compass/sass_extensions/sprites/layout_methods.rb (relative to the compass install directory).

The updated method should look like this:

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

Note that this sometimes may not produce an optimal layout, because it's only applying the spacing after the row fitting algorithm has already decided how the sprites are divided into rows. Hopefully it should be good enough for most cases though.

I should also mention that I have essentialy zero experience programming in ruby, so this may be extremely badly written code. It does seem to work though.

Answer 2

when using smart layout, spacing can't be set #718.

But there's a pull request for solving the issue: Smart layout now considers spacing, should fix #718