Question

我最近一直在使用Sass，最后跳到了包括指南针（好吧，我在VS2010中使用Mindscape，最后决定尝试一下）。我只是喜欢精灵生成能力。我对任何知情人士都有疑问。

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

@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指令下的列表中输入它们。

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

Answer 1

是的：

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

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

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

1 个答案: