sprite - 如何将指南针生成的精灵用于生成的内容？

Question

是否可以使用指南针生成的精灵来替换下面的图标路径？

a:before { content: url(/pathto/icon.png); }

虽然我可以弄清楚如何在其中获取精灵路径，但我不知道是否有可能获得精灵显示的正确位。

Answer 1

不要将精灵图加载为“内容”。将内容设置为“”，将精灵加载为背景，并像使用任何其他文本/图像替换精灵一样控制它。

a:before {
  @include <map>-sprite(<icon>);
  @include sprite-dimensions(<map>, <icon>);
  content: " ";
}

在哪里<map>和<icon>由您的特定精灵图和图标名称替换。