如何为少量文件自动生成精灵？

Question

我有一个包含less个文件的项目，这些文件通过网址引用图片。该项目作为单页面应用程序提供给用户，所有JS都被简化并作为一个文件发送。但是，图像是在单独的文件中发送的。为了消除这种延迟，我想将图像传递到一个文件中。我怎样（以非手动方式）精灵图像，并改变less以参考精简图像？

Answer 1

您可以将精灵CSS选择器分离到与精灵表同时生成的文件中。我使用SpriteRight但是有很多方法可以让那只猫去皮肤。如果您愿意，这里是一个名为Glue的命令行工具。获得精灵Less / CSS文件后，将其重新导入主Less文件，它应该可以正常工作。

所以你的设置可能如下所示：

• /更少
  • main.less
  • sprite.less
• / CSS
  • main.css（已编译和连接的较少文件）
• / IMG
  • / _换精灵
    • ...（构成您的精灵表的图片）
  • sprite.png

main.less：

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

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

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

我希望我的解释有意义。我每天都做与此非常相似的事情并且效果很好。