-
-
Save Rocketpilot/1269229 to your computer and use it in GitHub Desktop.
/* 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) |
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.
Oh, wow. OK, I clearly need to explore the more programmatic side of SASS a lot more. Thanks.