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.

4

3 回答 3

13

您无法让间距与智能布局一起使用的原因是智能布局根本不支持间距。间距仅对水平和垂直布局有任何影响。

也就是说，如果您愿意修补指南针代码，您可以自己添加支持。您需要替换文件中的calculate_smart_positions方法，该方法位于（相对于 compass 安装目录）。layout_methods.rblib/compass/sass_extensions/sprites/layout_methods.rb

更新后的方法应如下所示：

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

请注意，这有时可能不会产生最佳布局，因为它只是在行拟合算法已经决定如何将精灵划分为行之后才应用间距。希望它对于大多数情况应该足够好。

我还应该提到，我在 ruby​​ 编程方面的经验基本上为零，所以这可能是编写得非常糟糕的代码。它似乎确实有效。

于 2013-06-01T15:54:12.077 回答
1

使用智能布局时，不能设置间距#718。

但是有一个解决问题的请求：智能布局现在考虑间距，应该修复 #718

于 2013-06-03T15:59:43.017 回答
0

这是我创建的一个简单的解决方案，它的表现非常好在 GitHub 上查看

于 2014-02-06T18:31:35.993 回答