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

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中编程实际上没有经验,所以这可能是编写得非常糟糕的代码.它似乎确实有效.