Customizing the output of Compass sprites - sass

Question

I have a top bar menu (that's based on Zurb's Foundation):
This is the SCSS:
.top-bar {
.top-bar-section {
ul {
#import "menu-icons/*.png";
#include all-menu-icons-sprites;
}
}
}
Now, this does what expected, but the problem is that I want to style the a element inside each li elements (actually, I'd like to apply it to .top-bar.topbar-section.ul.li.a:before).
However, since the site is build in WordPress, and so the menu, I can only assign the class to the li element and I have no idea how to make the Compass's spriting work.
I know, I could customize the way the menu is rendered by WordPress using a walker class, but I'd prefer to try finding a solution simply writing the right SCSS, providing that is possible.

Answer 1

There are a few sprite helper functions to be aware of when the default output isn't exactly what you want:
sprite-url
sprite-position
sprite-names (undocumented)
Using these you can apply the sprite styles to the children of the li elements:
.top-bar .top-bar-section ul > li {
// Generate the sprite map.
$menu-icons-sprite-map: sprite-map("menu-icons/*.png", $layout: smart);
// Set the background image.
> a:before {
background: sprite-url($menu-icons-sprite-map) 0 0 no-repeat;
}
// Set the background position for each sprite.
$menu-icons-sprite-names: sprite-names($menu-icons-sprite-map);
#each $name in $menu-icons-sprite-names {
&.menu-icons-#{$name} > a:before {
background-position: sprite-position($menu-icons-sprite-map, $name);
}
}
}