Global offset of sprites

spriteposition

/* I'd hoped I could use something like this to globally offset the vertical position of sprites when I use them to badge the left-hand site of heading text. Right now, each sprite defaults to the very top of the containing box and doesn't line up neatly with lower case text:

* Heading 

body text

etc.

*/

sprite-background-position($map, $sprite, $offset-x, $offset-y)

Ah, yes, I get the error "The first argument to sprite-position() must be a sprite map", but I do pass it what I think should be the sprite name ("icons" in this context, surely?). I assume the second argument is to specify a particular sprite, which would be a pain if I want to alter the vertical offset globally.

so what you can do it use the magic mixin @include <folder>-sprite-position(<sprite>, $offset_x, $offset_y) and not have to worry about the map

OK, that works, but it looks like I'll need to apply the mixin to every heading that has a unique icon. Darn it.

Thanks again for the help!

you could use a list and an @each

@each $sprite in (sprite1 sprite2 sprite3) {
  @include {folder}-sprite-position($sprite, $offset_x, $offset_y);
}

Oh, wow. OK, I clearly need to explore the more programmatic side of SASS a lot more. Thanks.

np enjoy!

Nuts. That only seems to apply the last icon in the list to the headings. Tried comma-delimiting, wrapping in quotes, with & without the parenthesis.

Can't find where it changes the actual CSS output, either, which is spooky, even though the rendered page does actually change.

Oh, wait, now I see what it's doing:

primary_content header h3 {

background-position: 0 2px;
background-position: 0 -30px;
background-position: 0 -62px;
background-position: 0 -94px;
background-position: 0 -126px;
background-position: 0 -158px;
background-position: 0 -190px;
background-position: 0 -222px;
background-position: 0 -254px;
background-position: 0 -286px;
}

I'm doing something wrong in the way I call the function, clearly.

Right, got it to work. For the record:

    @each $sprite in apply, bookings, buy, down, questions, report, reset_password, resources, statuses, up {
            h3.icons-#{$sprite} {@include icons-sprite-position($sprite, 0px, 2px); }
    } 

produced what I'm looking for.