CODEWITHSUNDEEP
sasscompass-sasscss-sprites
Andrea Sciamanna
Andrea Sciamanna

Reputation: 1474

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.

Upvotes: 3

Views: 219

Answers (1)

Russ Ferri
Russ Ferri

Reputation: 6589

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

Upvotes: 2

Related Questions