Ruby China

Gem 刚刚试了 css_sprite 确实很爽啊

huacnlee · 2011年11月07日 · 最后由 dcitpx.com 回复于 2018年08月15日 · 5186 次阅读

这个是 @flyerhzm 的作品

其实很早以前就知道有这么个 gem 之前一直没试过，刚刚再项目里面试了一下，确实非常好用啊！ 整合图片变的超级简单，以后这个事情不用等前端来搞了（之前一直觉得写 CSS Sprite 麻烦，只是写过一些小的）。

https://github.com/flyerhzm/css_sprite

用法很简单

创建 public/images/css_sprite 目录，小图片放进去

button/red.png
button/green.png
button/blue.png

生成 CSS Sprite

$ rake css_sprite:build

当然，前提是 Gemfile 要安装好 css_sprite，就会生成 public/stylesheets/css_sprite.css，项目里面引用它，页面上门这么写就可以调用了

<span class="button"><span class="red">Red Button</span></span>
<span class="button"><span class="green">Green Button</span></span>
6 个赞
无引用文章
kevinhua #1 2011年11月07日

Is there any visual examples?

huacnlee #2 2011年11月07日

#1 楼 @kevinhua 补上了简单的用法

huacnlee #3 2011年11月08日

另外的选择 https://github.com/jakesgordon/sprite-factory sprite-factory 还可以支持 Rails 3.1

kevinhua #4 2011年11月08日

谁能@我一下，@kevinhua

blankyao #6 2011年11月15日

这个太实用了，每次改个图片都得开 photoshop 搞一下实在是太麻烦了

seaify #7 2015年07月13日

@huacnlee @flyerhzm 

chuck@chuck-MacBook-Pro:~/seaify/weishop(refactor_home_page|✚1) % rake css_sprite:build                                                                                                                                                           (refactor_home_page00)
rake aborted!
NameError: uninitialized constant MiniMagick::CommandBuilder
/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/lib/css_sprite/sprite.rb:102:in `output_image'
/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/lib/css_sprite/sprite.rb:40:in `execute'
/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/lib/css_sprite/sprite.rb:29:in `block in build'
/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/lib/css_sprite/sprite.rb:29:in `each'
/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/lib/css_sprite/sprite.rb:29:in `build'
/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/tasks/css_sprite_tasks.rake:7:in `block (2 levels) in <top (required)>'
/Users/chuck/.rvm/gems/ruby-2.1.5/bin/ruby_executable_hooks:15:in `eval'
/Users/chuck/.rvm/gems/ruby-2.1.5/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => css_sprite:build
(See full trace by running task with --trace)

报错 MiniMagick::CommandBuilder, 可是/Users/chuck/.rvm/gems/ruby-2.1.5/gems/css_sprite-2.3.0/lib/css_sprite/sprite.rb 中有 require 'mini_magick'啊，搞不懂

dcitpx.com #9 2018年08月15日

自学就是会遇到很多不懂的问题，没有技术大师带你，需要老师来培训的请考虑一下大聪 IT 网络，超划算，学到的东西很多，就业前景也可以，现在技术人才供不应求啊，详情戳网籽

huacnlee 在 推荐用 sprite-factory 这个组件整合图片 提及了此话题。 04月03日 10:56
需要 登录 后方可回复, 如果你还没有账号请 注册新账号