Идеалогически мне очень нравится технология css-спрайтов, когда мелкие картинки рисуются в одном файле и отображаются с помощью свойства background-position, экономя коннекты к серверу. Спрайты напоминают мне первую работу, где я работал с 3D-графикой и дизайнеры размазывали трехмерные модели по текстурам. А также раньше были спрайтовые монстры. Эх.

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

Самая главная новость - технология работает! Это очень важно, так как иногда библиотеки перестают работать (например недавно отвалился haml в рейлс 3.2.3). В нашем случае учебник на официальном сайте актуальный:

• http://compass-style.org/help/tutorials/spriting/

Я создал простую демку на хероку, итоговый спрайт получился такой:

Минимальный код, необходимый для работы:

# Gemfile
gem 'compass-rails'

# app/assets/buttons/*
# Файлы кнопок (red.png и red2.png в моем случае)

# app/assets/stylesheets/application.css.scss
@import "buttons/*.png";

.twitter {
  display: block;
  width: 300px;
  height: 300px;
  @include buttons-sprite(red);    # red и red2 - имена соответствующих картинок
  &:hover {
    @include buttons-sprite(red2);
  }
}

# app/views/home/index.html.haml
= link_to '', "https://twitter.com/#!/avakhov", class: 'twitter'

Теперь нюансы:

Возможно я просмотрел где это написано, но библиотека обрабатывает только png-файлы. Для итогового спрайта - это оправдано, так как необходима картинка без потери качества, но для исходных картинок мне кажется это излишне. К сожалению когда я попробовал импортировать jpg-файлы, система выдала не очень информативную ошибку:

File to import not found or unreadable: buttons/*.jpg.
Load paths:
  Sass::Rails::Importer(/home/alex/m/ideas/blog-1-css-sprite/app/assets/stylesheets/application.css.scss)
  /home/alex/m/ideas/blog-1-css-sprite/app/assets/stylesheets
  /home/alex/.rbenv/versions/1.9.3-p0-ff/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/blueprint/stylesheets
  /home/alex/.rbenv/versions/1.9.3-p0-ff/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets
  Compass::SpriteImporter
  (in /home/alex/m/ideas/blog-1-css-sprite/app/assets/stylesheets/application.css.scss)

Также есть ограничения на имена файлов, которые можно использовать для спрайтов. Простые и понятные 1.png и 2.png также не подходят. В этот раз описание ошибки было хорошее:

Sprite file names must be legal css identifiers. Please rename 1.png

С первой ошибкой я провозился довольно долго, так как не знал насколько хорошо @import должен вообще работать и сначала думал, что что-то с путями. Раньше я бы сильно разозлился, но теперь понимаю, что большая часть рабочего времени программиста проходит в режиме "что-то где-то работает не так как хочется". Сейчаc я сам поддерживаю несколько гемов, сегодня в первый раз создал демо-проект для поста, и вижу сколько времени уходит на эти, казалось бы не сложные операции. Поэтому, то, что многие программы работают и работают достойно - это само по себе большое чудо, и, если мои рассказы помогут сэкономить вам немного времени, то буду очень рад.