0

我最近一直在使用 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 指令下的列表中输入它们。

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

4

1 回答 1

1

是的：

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

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

于 2013-02-14T18:25:19.917 回答