Skip to content

Instantly share code, notes, and snippets.

@Layzie
Created December 11, 2015 06:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Layzie/6502d663a1a816de072f to your computer and use it in GitHub Desktop.
Save Layzie/6502d663a1a816de072f to your computer and use it in GitHub Desktop.
Railsアプリでsprite-factoryを使ってRetina対応したい気持ち ref: http://qiita.com/Layzie/items/d4268b8d76d668d3f232
.ico-hoge-sp {
background-image: image-url('sprite@2.png');
width: 109px;
height: 29px;
background-position: 0px -103px;
background-repeat: no-repeat;
background-size: 322px auto;
}
require 'sprite_factory'
require 'fastimage'
namespace :assets do
namespace :sprite do
desc 'recreate sprite images and css for SP'
task :sp do
SpriteFactory.run!(
'app/assets/images/sprite',
:layout => 'packed',
:style => 'scss',
:cssurl => "image-url('sprite/$IMAGE')",
:output_style => 'app/assets/stylesheets/_sprite@2.scss',
:output_image => 'app/assets/images/sprite@2.png'
) do |images|
images.map do |name, data|
sprite_size = FastImage.size('app/assets/images/sprite@2.png')
<<EOF
.ico-#{name}-sp {
background-image: image-url('sprite@2.png');
width: #{data[:cssw] / 2}px;
height: #{data[:cssh] / 2}px;
background-position: #{data[:cssx] / -2}px #{data[:cssy] / -2}px;
background-repeat: no-repeat;
background-size: #{sprite_size[0] / 2}px auto;
}
EOF
end.join("\n")
end
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment