css - 使用具有智能布局和间距的罗盘生成 Sprite

Question

我正在尝试使用 SASS Compress 生成一些 sprite，我想将智能布局应用于 sprite 文件，如文档 http://compass-style.org/help/tutorials/spriting/sprite-layouts/

效果很好:

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

但是当我添加布局时它会中断；没有间距，也没有智能布局:

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

如何将智能布局应用于生成的 Sprite ？

更新一段时间后，我开始工作了:

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

但现在我无法让间距起作用。 Sprite 很聪明，但没有间距。

Answer 1

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

也就是说，如果您愿意修补指南针代码，您可以自己添加支持。您需要替换 layout_methods.rb 文件中的 calculate_smart_positions 方法，该文件位于 lib/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

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

我还应该提一下，我对 ruby​​ 编程基本上是零经验，所以这可能是写得非常糟糕的代码。不过它似乎确实有效。