定制指南针小精灵的输出 [英] Customizing the output of Compass sprites

问题描述

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

I have a top bar menu (that's based on Zurb's 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：之前）。

Now, this does what expected, but the problem is that I want to style the a element inside each li elements (actually, I'd like to apply it to .top-bar.topbar-section.ul.li.a:before).

但是，由于该网站是使用WordPress构建的，因此是菜单，因此，我只能将该类分配给li元素，而且我不知道如何使Compass的拼写工作。

However, since the site is build in WordPress, and so the menu, I can only assign the class to the li element and I have no idea how to make the Compass's spriting work.

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

I know, I could customize the way the menu is rendered by WordPress using a walker class, but I'd prefer to try finding a solution simply writing the right SCSS, providing that is possible.

推荐答案

当默认输出与您想要的输出不完全相同时，有一些精灵帮助器函数需要注意：

There are a few sprite helper functions to be aware of when the default output isn't exactly what you want:

• sprite-url


• sprite-position


• 雪碧名称（未记录）

• sprite-url
• sprite-position
• sprite-names (undocumented)

使用这些元素可以将精灵样式应用于 li 元素的子代：

Using these you can apply the sprite styles to the children of the li elements:

.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);
        }
    }
}

这篇关于定制指南针小精灵的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！