StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The reason you can't get spacing to work with the smart layout is because the smart layout simply doesn't support spacing. Spacing only has any effect on the horizontal and vertical layouts.</p> <p>That said, you can add support yourself if you're willing to patch the compass code. You'll need to replace the <code>calculate_smart_positions</code> method in the <code>layout_methods.rb</code> file, which can be found at <code>lib/compass/sass_extensions/sprites/layout_methods.rb</code> (relative to the compass install directory).</p> <p>The updated method should look like this:</p> <pre><code>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 </code></pre> <p>Note that this sometimes may not produce an optimal layout, because it's only applying the spacing after the row fitting algorithm has already decided how the sprites are divided into rows. Hopefully it should be good enough for most cases though.</p> <p>I should also mention that I have essentialy zero experience programming in ruby, so this may be extremely badly written code. It does seem to work though.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload