Question

I’m using the compass sprite helpers to position an icon and it works on the y axis, but it’s positioned at 0 on the x axis. Now I could set the x offset to a fixed value, but I’d rather have it set to “right”.

This is my code now:

background: {
  url: sprite-url($icons-sprite);
  repeat: no-repeat;
  position: sprite-position($icons-sprite, nav-active);
}

This is what I’m trying to achieve (pseudo-code):

background: {
  url: sprite-url($icons-sprite);
  repeat: no-repeat;
  position: right sprite-position-y($icons-sprite, nav-active);
}

Does anyone have a solution for this?

Answer 1

Automatic sprites

Before creating the sprite map, you must specify the sprite engine you want to have the sprite on the right side of the sprite map (see the documentation for further information):

$icons-nav-active-position: 100%;
@import "icons/*.png";

Then call the function sprite-position() as the usual:

position: sprite-position($icons-sprite, nav-active);

Manual sprites

When you call sprite-map(), you must pass the argument $<map>-<sprite>-position: 100% (where <map> represents the folder name that contains your sprites):

$icons-sprite: sprite-map("icons/*.png", $icons-nav-active-position: 100%);
background: {
  url: sprite-url($icons-sprite);
  repeat: no-repeat;
  position: sprite-position($icons-sprite, nav-active);
}

Note 1: you can pass the argument $position: 100% to set the position for all the sprites.
Note 2: before Compass 0.12.1, the arguments to pass to sprite-map() does not start with <map>-. See the issue 828.