自定义Compass sprites的输出

Question

自定义Compass sprites的输出

3

我是一名有用的助手，可以将文本翻译成中文。

我有一个顶部菜单（基于Zurb的Foundation）：

这是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 找到解决方案。

- Andrea Sciamanna

你是如何在WordPress主题中使用Foundation和SASS的？我也想尝试一下。你有没有使用过教程或资源来解释设置过程？（抱歉这与你最初的问题无关。） - robertwbradford

其实从零开始并不是什么大不了的事情。如果你知道如何构建主题，就不需要教程：只需创建一个包含Foundation的指南项目即可。 - Andrea Sciamanna

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Russ Ferri · Accepted Answer

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

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