10

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.

KatieK
  • 13,586
  • 17
  • 76
  • 90
Tommy Bjerregaard
  • 1,089
  • 11
  • 24

3 Answers3

13

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.

James Holderness
  • 22,721
  • 2
  • 40
  • 52
  • It works perfectly, but i am looking for a solution where i dont need to change the compass files myself. I am not the only developer on this project. Great work with the ruby code! – Tommy Bjerregaard Jun 06 '13 at 12:46
  • 1
    @TommySorensen I fully intend to submit this as a patch to the compass project - I was just waiting for some feedback on whether it worked or not. Whether they're willing to accept the code in its current form is enother question, but I think at least it's in better condition than that other pull request. – James Holderness Jun 06 '13 at 15:07
  • OK, great idea. This code is working in its current form for me with no problems. Now i don't have to wait for the pull request. – Tommy Bjerregaard Jun 06 '13 at 18:24
1

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

agustibr
  • 2,146
  • 1
  • 13
  • 8
0

Here is a simple solution I've created it performs very well Check it on GitHub

paul.g
  • 181
  • 1
  • 9
  • Does it support vertical and horizontal alignment with padding between each image? – Tommy Bjerregaard Feb 06 '14 at 22:34
  • If you set sprite layout to vertical or horizontal it will support spacing if you will keep smart layout it will not support any spacing between images, that is compass configuration and you can't do anythink about it. – paul.g Feb 08 '14 at 07:23