sass - 自定义指南针精灵的输出

Question

我有一个顶部栏菜单（基于 Zurb 的基金会）：

这是 SCSS：

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

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

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

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

Answer 1

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

• 精灵网址
• 精灵位置
• 精灵名称（未记录）

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