Sass/Compass 和 Sprites：如何为特定页面的 sprite 选择随机图像？答案

【问题标题】：Sass/Compass and Sprites: How do I pick random images for a page-specific sprite?Sass/Compass 和 Sprites：如何为特定页面的 sprite 选择随机图像？
【发布时间】：2011-10-21 08:11:34
【问题描述】：

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

例如，假设我有两个页面，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

compass spriting tutorial 表示所有图像必须位于同一目录中。鉴于上述情况，这是不可能的，因为 /images/foo/bar.png 用于两个页面（但不一定是网站的每个页面）。所以，在这种情况下，我要么必须：

复制 images/foo/bar.png 图像并将副本放入特定于每个页面的文件夹中或
将每个页面特定文件夹中的图像符号链接到文件实际所在的共享位置

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

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

【问题讨论】：

您打算用精灵替换网站上的每张图片吗？

标签： css ruby-on-rails-3 sass css-sprites compass-sass

【解决方案1】：

你可以试试

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

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

【讨论】：

【解决方案2】：

如果您希望每次重新加载页面时都更改图像，那么使用纯 css 是不可能的，因为 sass 是经过编译的，而不是针对每个请求进行评估的。

【讨论】：

感谢您的评论，但这并不是我要问的。我改写了我的问题，希望能更清楚。

【解决方案3】：

你问的是不可能的。

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

【讨论】：

我希望页面特定的精灵进入页面特定的 css 文件，所以是的，我将用一个精灵替换 bar.png 和 elvis-presley.png，仅用于 page-a。 html。与我想用特定于 page-b.html 的精灵替换 bar.png 和 david-hasselhoff.png 完全分开。计划用 sprite 替换图像，如何在每个页面上引用它们？
此外，单个图像文件将不再用于任何一页，但需要它们来编译新的精灵。问题就在这里，要为两个页面编译精灵，我需要相同图像（bar.png）的 2 个副本，或者能够从不同目录中的图像编译精灵。