我正在尝试用SASS Compress生成一些精灵,我想将智能布局应用到精灵文件,如docs
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;
但是现在我无法获得间距.精灵是聪明的,但没有间距.
解决方法
您无法获得间距以适应智能布局的原因是因为智能布局根本不支持间距.间距只对水平和垂直布局有任何影响.
也就是说,如果您愿意修补罗盘代码,您可以自行添加支持.您需要替换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中编写了经验丰富的程序,所以这可能是非常糟糕的代码.它似乎工作虽然.
