css3 – 生成具有智能布局和间距的指南针的精灵

我正在尝试用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中编写了经验丰富的程序,所以这可能是非常糟糕的代码.它似乎工作虽然.

原文地址：https://www.jb51.cc/css/214710.html