Спрайтовая нирвана

Думаю, многие используют спрайты при разработке сайтов (а если не используют, то должны, ведь это очень эффективный способ ускорить загрузку сайта). Лично для меня процесс изготовления спрайтов раньше выглядел примерно так:

1. В Fireworks (или в Фотошопе) создается отдельный файл.
2. В него добавляются иконки-картинки (по сетке или без).
3. Файл экспортируется в PNG (который по желанию еще дополнительно оптимизируется).
4. У каждой иконки замеряются координаты левого угла и её ширина/высота [↺].
5. Эти координаты добавляются в CSS вместе с рядом правил для выравнивания [↺].

Это минимум, а последние два шага повторяются много раз. Обычно координаты иконок в дальнейшем не меняются, но иногда что-то (перфекционизм?) заставляет вносить такие изменения, которые требуют что-то передвинуть и тогда нужно проходить по CSS-файлам и менять координаты. Всё это несколько неудобно, а потому порой возникает желание забить на спрайты вообще, применяя их лишь в самых важных проектах.

Новый Fireworks умеет генерить спрайты автоматически (включая и нужный CSS к ним). Но лично я с ним как-то не очень разобрался в плане повторной генерации кода и картинки: видимо, код нужно всегда держать отдельно, чтобы потом его можно было легко заменить. Еще один минус: все иконки должны располагаться в одном исходном файле (для генерации единого спрайта), а так бывает далеко не всегда. К тому же это решение привязано к конкретному редактору, что не всегда бывает удобно.

Есть еще сервисы типа Sprite Cow или Spritebox, которые упрощают жизнь в части операций (вычисления координат или генерации CSS, например), но все равно требуют слишком много возни. В любом случае, такие дополнительные сервисы мне всегда было слишком лениво открывать.

Когда я открыл для себя LESS, я попытался слегка упорядочить генерацию спрайтов при помощи самописных примесей. Это уменьшило количество CSS-кода, но определение и указывание координат все равно приходилось делать вручную. Хотя тогда мне это еще казалось нормальным — я был вполне доволен такой полуручной сборкой.

А потом я познакомился с SASS и попробовал сгенерировать спрайты Компасом. И это открыло мне глаза на то, насколько легко можно работать со спрайтами. Всё, что от вас требуется:

1. Набросать все свои картинки-иконки в папку.
2. Добавить две строчки в SASS/SCSS-файл:

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

И это всё. Никакой расстановки по сетке, вычислений координат и прочего. Всё происходит автоматически, но при желании настраивается под ваши нужды. После всего вы получаете:

• Саму картинку-спрайт (с уникальным урлом, что удобно при обновлении картинки, которая иначе закешируется).
• CSS-код (классы, которые вы можете добавлять к элементам HTML или просто расширять).

Добавьте новую иконку в папку (или удалите старую) — и спрайт со всеми координатами будут автоматически обновлены. Более того, размер спрайта получается даже меньше, чем у Fireworks (который вообще-то довольно прилично оптимизирует изображения). Компас даже умеет определять состояния по названию файлов: добавьте _active или _hover к имени файла и получите желаемый результат. Магия!

В общем, настоятельно рекомендую вам попробовать. Для Стайлуса тоже есть подобный модуль (не для Windows), но я его не пробовал.