Search code examples
sasscompass-sasscss-sprites

Customizing the output of Compass sprites


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.


Solution

  • There are a few sprite helper functions to be aware of when the default output isn't exactly what you want:

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