Skip to content

Instantly share code, notes, and snippets.

@Layzie

Layzie/_sprite.scss

Created December 11, 2015 06:45
Download ZIP

Revisions

  1. Layzie created this gist Dec 11, 2015.
    8 changes: 8 additions & 0 deletions _sprite.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    .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;
    }
    32 changes: 32 additions & 0 deletions assets.rake
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    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