Ruby
CSS
Rails
Sass

Railsアプリでsprite-factoryを使ってRetina対応したい気持ち

More than 3 years have passed since last update.


概要

タイトルの通りなんですが、Rails初心者が試行錯誤した結果あんまりキレイじゃない解決法になったのでメモ。

前提として…。


  • ruby 2.2.0p0 (2014-12-25 revision 49005)

  • rails v4.2.0

  • sass v3.4.16

  • sprite-factory v1.7.1

compassはなし。


対応

ちょっと頑張らないと、sprite-factoryはsassのmixinにならない感じ。(参考: https://github.com/jakesgordon/sprite-factory/issues/16)

個人的にmixinが好きじゃないというのもあり、今回はこちらを参考に、クラスとして書き出してextendして使うという前提にしてあります。

rakeファイルは以下。パス名とかは適宜変えてね。


assets.rake

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


sprite-factoryはどうやら内部ではスプライト画像の全体のwidth / height持ってるんですが、取り出し方分からず…。

結局fastimageという画像のwidth / heightを取ってくれるgemを入れてそれを使って、background-sizeを入れてます。

これでbundle exec rake assets:sprite:spを実行するとこんな形のscssファイルができます。


_sprite.scss

.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;
}

compass使ってればfastimageいらなかったけど、まあできたのでよいかと。調べてもあんまり情報が出てこないんで、書いておきました。