sass - 自定义 compass Sprite 的输出

Question

我有一个顶部栏菜单(基于 Zurb 的基金会):

这是 SCSS:

.top-bar {
  .top-bar-section {
    ul {
      @import "menu-icons/*.png";
      @include all-menu-icons-sprites;
    }
  }
}

现在，这符合预期，但问题是我想在每个 li 元素中设置 a 元素的样式(实际上，我想应用它到 .top-bar.topbar-section.ul.li.a:before).

但是，由于该站点是在 WordPress 中构建的，因此菜单也是如此，我只能将类分配给 li 元素，我不知道如何使 Compass 的 spriting 工作。

我知道，我可以使用 walker 类自定义 WordPress 呈现菜单的方式，但如果可能的话，我更愿意尝试找到一种只需编写正确的 SCSS 的解决方案。

Answer 1

当默认输出不是您想要的时，需要注意一些 sprite 辅助函数:

• sprite-url
• sprite-position
• sprite-names (未记录)

使用这些，您可以将 Sprite 样式应用于 li 元素的子元素:

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