自定义指南针精灵的输出

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 的精灵工作。

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

Answer 1

当默认输出不完全符合您的要求时，需要注意一些精灵辅助函数：

• sprite-url
• sprite-position
• sprite-names（未记录）

使用这些您可以将精灵样式应用于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);
        }
    }
}