Css Sass/指南针和精灵：如何为特定页面的精灵选择随机图像？

我正在使用sass/compass，希望利用compass的精灵功能。我参与的项目是一个长期存在的应用程序，其中图像都分散在images文件夹中

例如，假设我有两个页面，page-a.html和page-b.html，每个页面上都有以下图像：

page-a.html:
  /images/foo/bar.png
  /images/elvis-presley.png

page-b.html
  /images/foo/bar.png
  /images/people/david-hasselhoff.png

建议所有图像必须位于同一目录中。鉴于上述场景，这是不可能的，因为/images/foo/bar.png用于两个页面（但不一定是站点的每个页面）。因此，在这种情况下，我必须：

复制images/foo/bar.png图像，并将副本放入特定于每个页面或页面的文件夹中

将每个页面特定文件夹中的图像符号链接到文件实际所在的共享位置

这两个选项都不可取，并且很容易阻止我继续这个sprite优化尝试

---

我需要知道的是compass是否可以从同一文件夹中的多个图像创建精灵而不是。

如果希望每次重新加载页面时图像都发生更改，那么，对于纯css来说，这是不可能的，因为sass是编译的，而不是对每个请求进行评估。

您所要求的是不可能的

---

你打算用css精灵替换你提到的图像吗？如果是这样，每个页面都会引用编译后的sprite图像。单个图像文件将不再用于任何页面，因此它们在文件系统中的位置无关紧要

你可以试试

@import "images/**/*.png";

@each $file in bar, elvis-presley, david-hasselhoff {
    .sprite.#{$file} {
        @include flags-sprite($file);
    }
}

---

谢谢你的评论，但这并不是我想要的。我重新编写了我的问题，希望更清楚。你打算用精灵替换网站上的每个图像吗？我希望特定于页面的精灵进入特定于页面的css文件，所以是的，我将用一个只用于page-a.html的精灵替换bar.png和elvis-presley.png。与此完全不同，我想用一个特定于page-b.html的精灵替换bar.png和david-hasselhoff.png。通过计划用精灵替换图像，它们将如何在每个页面上被引用？此外，单个图像文件将不再在任何一个页面上使用，而是需要它们来编译新的精灵。问题在于，要为两个页面编译精灵，我需要相同图像（bar.png）的两个副本，或者能够从单独目录中的图像编译精灵。