Compass Sprites

Having had issues with Compass based Sprites on a recent Rails 4 upgrade, I'm just testing getting them working on Rails 5 with a basic no frills setup. Firstly install compass-rails which should install the compass dependency.

gem 'compass-rails'

Grab the Slik icons from FamFamFam and unpack them into app/assets/images/slik. Add the following to your CSS / Sass file.

@import 'compass'
@import "slik/*.png"
@include all-slik-sprites

  display: inline-block
  width: 16px
  height: 16px
  margin: 4px
  background-color: #fff

After a reload Compass with combine the contents of the slik directory into a single png....

Robs-MBP:robl rl$ ls -la app/assets/images/
total 8664
drwxr-xr-x    27 rl  staff      918 16 Dec 00:51 .
drwxr-xr-x     8 rl  staff      272 16 Dec 00:51 ..
drwxr-xr-x@ 1002 rl  staff    34068 16 Dec 00:38 slik
-rw-r--r--     1 rl  staff   281821 16 Dec 00:51 slik-sa4f5bcade8.png

...and adds Sass styles which allow you to do

%span.slik.slik-accept produce something like this. One image load and 700 icons. Woop.

Sprites from the sheet

Production deploy

It appears that without commiting the compiled file that rake assets:precompile falls over in development but production seems to precompile the sprite fine.

Robs-MBP:robl rl$ bundle exec rake assets:precompile
I, [2016-12-16T21:37:56.612717 #3601]  INFO -- : Writing /Users/rl/repos/rails5/robl/public/assets/slik-sa4f5bcade8-74b788e911d17ade32471067d52609bb869d028e4b2ac945cad2b966cb312058.png
rake aborted!
Errno::ENOENT: No such file or directory @ rb_sysopen - /Users/rl/repos/rails5/robl/app/assets/images/slik-sa4f5bcade8.png
/Users/rl/.rvm/gems/ruby-2.3.0@rails5/gems/sprockets-3.5.2/lib/sprockets/asset.rb:99:in `binread'
/Users/rl/.rvm/gems/ruby-2.3.0@rails5/gems/sprockets-3.5.2/lib/sprockets/asset.rb:99:in `source'
/Users/rl/.rvm/gems/ruby-2.3.0@rails5/gems/sprockets-3.5.2/lib/sprockets/utils/gzip.rb:7:in `initialize'
/Users/rl/.rvm/gems/ruby-2.3.0@rails5/gems/sprockets-3.5.2/lib/sprockets/manifest.rb:198:in `new'