Sass / Compass и Sprites: Как выбрать случайные изображения для спрайта для конкретной страницы?

Question

Я использую sass / compass и хочу воспользоваться функцией спрайта компаса. Проект, над которым я работаю, представляет собой давнее приложение, в котором все изображения разбросаны по папке изображений.

Например, допустим, у меня есть две страницы, 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 используется для обеих страниц (но не обязательно для каждой страницы сайта). Итак, в этом случае мне бы пришлось:

1. продублируйте изображение images / foo / bar.png и поместите копию в папку, соответствующую каждой странице, или
2. символьная ссылка на изображение в каждой папке, определенной для конкретной страницы, в общую папку, где на самом деле находится файл

Ни один из этих вариантов не желателен и легко помешает мне продолжить эту попытку оптимизации спрайта.

Мне нужно знать, возможно ли для компаса создать спрайт из нескольких изображений , а не в одной папке.

Answer 1

То, что вы спрашиваете, невозможно.

Планируете ли вы заменить упомянутые вами изображения спрайтами CSS?Если это так, каждая страница будет ссылаться на скомпилированное изображение спрайта.Отдельные файлы изображений больше не будут использоваться для какой-либо страницы, поэтому не имеет значения, где они находятся в файловой системе.

Answer 2

Вы можете попробовать

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

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

Answer 3

Если вы хотите, чтобы изображения менялись каждый раз при перезагрузке страницы, это невозможно с чистым CSS, потому что sass компилируется и не обрабатывается при каждом запросе.