Question

我试图使用SASS Compress生成一些精灵，我想将智能布局应用于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-spacing: 20px;
$sprite-layout: smart;
@import "sprite/*.png";
@include all-sprite-sprites;

但现在我无法让间距发挥作用。精灵很聪明但没有间距。

Answer 1

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

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

请注意，这有时可能无法产生最佳布局，因为在行拟合算法已经确定精灵如何划分为行之后，它仅应用间距。希望它对大多数情况来说应该足够好了。

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

Answer 2

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

但是有解决问题的拉动请求：Smart layout now considers spacing, should fix #718

Answer 3

这是一个我创建的简单解决方案，它表现得非常好Check it on GitHub

使用具有智能布局和间距的罗盘生成精灵

3 个答案: