Customizing the output of Compass sprites

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);
        }
    }
}