使用 Compass/Sass 自动获取 Sprite 文件的名称

Question

我最近一直在使用 Sass，终于跳到了 Compass 中（嗯，我在 VS2010 中使用 Mindscape，最后决定试一试）。我只是喜欢精灵生成功能。我有一个问题想问任何知情的人。

我有一个特定的目录，其中包含将在 sprite 文件中使用的所有图像。到目前为止，这是我的代码：

@import "icons/*.png";

@each $p in (delete, docEdit, buttonBack, docView, editAcct, email, help, info, lock, search, unlock) {
    .#{$p} { @include icons-sprites(#{$p}); }
}

不用说每个元素都是一个特定的图像文件，最终会出现在精灵中。

这会为列表中的每个项目生成（作为样本）：

.delete .icons-delete {
    background-position: -23px 0;
}

.docEdit .icons-docEdit {
    background-position: -63px 0;
}

我想知道是否可以通过获取指定目录中 .png 文件的所有名称并对其执行每个循环而不对其进行硬编码来进一步自动化此操作。这样我可以在需要时插入或删除图像，重新编译，输出将自动创建类，而无需我在@each 指令下的列表中输入它们。

提前感谢您的任何建议或 cmets！

Answer 1

是的：

@import "icons/*.png";
@include all-icons-sprites;

有关更多详细信息和选项，请参阅Compass Spriting Docs。