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)

The docs don't give usage examples for this function, so I've been trying and failing to understand the syntax and its appropriate context.

yea the lemonade ingest didn't get much documentation love =\ let me see if i can figure this out

so the way your doing it in the gist gets passed into this function to get the position http://j.mp/nWs2KI i think your problem is you need to pass a negative value? if this isn't working it may be a bug or make a small sample project that i can play with

To be honest, I can't use that function at all. Just get errors. I have no trouble just doing:

$icons-spacing: 32px;
@import "icons/*.png";

@include all-icons-sprites;

and then applying the class names to the appropriate headings, but anything more than that just baffles me. I can't even tell whether you use sprite-background-position as a mixin to an element like h3 {@include blah blah etc} or what.

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.