Sass 自定义指南针精灵的输出

我有一个顶栏菜单（基于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元素，我不知道如何使指南针的精灵工作

---

我知道，我可以使用walker类自定义WordPress呈现菜单的方式，但我更愿意尝试通过编写正确的SCS来找到解决方案，前提是这是可能的。

当默认输出不完全符合您的需要时，有一些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);
        }
    }
}

---

我在使它工作时遇到了一些麻烦，但最终我意识到我必须将最后一个选择器更改为

&.menu icons-#{$name}>a:before

。谢谢你@russ！啊，是的，我忘了精灵的名字不包括文件夹的名字。这种方法允许在类命名约定中有更大的灵活性：你是如何在你的WordPress主题中获得基础和SASS的？我也试着这么做。您是否使用了教程或资源来解释设置？（很抱歉，这与你原来的问题相切。）如果你从头开始的话，这其实没什么大不了的。你不需要教程，如果你知道如何建立一个主题：创建一个指南针项目，包括基金会。