Генерировать спрайты с компасом с умным расположением и интервалом

Я пытаюсь создать некоторые спрайты с помощью 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;

Но теперь я не могу заставить интервал работать. Спрайт умный, но без интервала.

Ответы

Ответ 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, так что это может быть очень плохо написанный код. Кажется, он работает.