css - 如何为我的 less 文件自动生成精灵？

Question

我有一个项目，less其中包含通过 URL 引用图像的文件。该项目作为单页应用程序交付给用户，所有 JS 压缩并作为一个文件发送。但是，图像是在单独的文件中发送的。为了消除这种延迟，我想在一个文件中提供图像。我如何（以非手动方式）精灵图像，并更改less以引用精灵图像？

Answer 1

您可以将精灵 CSS 选择器分离到它们自己的文件中，该文件与精灵表同时生成。我使用SpriteRight，但有很多方法可以给那只猫剥皮。如果您愿意，这里有一个名为Glue的命令行工具。一旦你有了你的 sprite Less/CSS 文件，你就可以将它导入到你的主 Less 文件中，它应该可以工作了。

因此，您的设置可能如下所示：

• /较少的
  • main.less
  • sprite.less
• /css
  • main.css（编译和连接的 Less 文件）
• /img
  • /_for-sprites
    • ...（构成您的精灵表的图像）
  • 精灵.png

main.less:

... (snip) ...
@import 'sprite.less';
... (snip) ...

sprite.less （由上面链接的实用程序生成）：

... (snip) ...
.icon1 { background-position: 0 0; }
.icon2 { background-position: 20px 20px }
... (snip) ...

我希望我的解释是有道理的。我每天都做与此非常相似的事情，而且效果很好。