CSS-спрайты на компасе
![](/assets/old/8-red/nuke2.jpg)
Идеалогически мне очень нравится технология css-спрайтов, когда мелкие картинки рисуются в одном файле и отображаются с помощью свойства background-position, экономя коннекты к серверу. Спрайты напоминают мне первую работу, где я работал с 3D-графикой и дизайнеры размазывали трехмерные модели по текстурам. А также раньше были спрайтовые монстры. Эх.
Кроме оптимизации отрисовки сайта в браузере (для маленьких и средних проектов это не так уж и важно) спрайты следует применять для кнопок с картинкой, которая меняется при наведении указатели мыши. Если :hover-состояние кнопки сделать через отдельный рисунок, то она противно моргнет при первой отрисовке. Я слышал про библиотеку компас, но обычно просил дизайнера или верстальщика подготовить файл с двумя состояниями. Наконец, недавно, попробовал использовать спрайты с компасом и хочу рассказать про несколько нюансов, с которыми столкнулся.
Самая главная новость - технология работает! Это очень важно, так как иногда библиотеки перестают работать (например недавно отвалился haml в рейлс 3.2.3). В нашем случае учебник на официальном сайте актуальный:
Я создал простую демку на хероку, итоговый спрайт получился такой:
Минимальный код, необходимый для работы:
# 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 я сам поддерживаю несколько гемов, сегодня в первый
раз создал демо-проект для поста, и вижу сколько времени уходит на эти, казалось бы не сложные операции. Поэтому, то, что многие программы
работают и работают достойно - это само по себе большое чудо, и, если мои рассказы помогут сэкономить вам немного времени, то буду очень рад.