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

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

Answer 1

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

自定义Compass精灵的输出

1 个答案: