Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lemonade - CSS Sprites on the fly
Search
Duke
December 11, 2010
Programming
2
130
Lemonade - CSS Sprites on the fly
Apresentação no #GURUSP sobre Lemonade
Duke
December 11, 2010
Tweet
Share
More Decks by Duke
See All by Duke
Docker
dukex
0
83
Lightning Talk: Testes em Javascript
dukex
0
120
Lightning Talk: Fluxo (básico) Ember 1.x.x
dukex
0
120
Concorrência em GO
dukex
0
41
Meetup Go - Como construi o uhuraapp.com
dukex
4
690
Realtime - Usando o MeteorJS
dukex
3
610
Como fazer API melhor que o governo?
dukex
1
700
Raspagem de Dados com Ruby
dukex
1
950
Grid System com Amor
dukex
0
710
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
110
PHPカンファレンス関西2025 基調講演
sugimotokei
5
930
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
AIともっと楽するE2Eテスト
myohei
9
3.1k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
テスト駆動Kaggle
isax1015
1
880
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
440
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
14k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
Featured
See All Featured
Done Done
chrislema
184
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Code Review Best Practice
trishagee
69
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
Lemonade Generates CSS sprites on the fly (for Sass/SCSS/Compass).
Emerson Vinicius twitter: @emersonvinicius gtalk: duke.m16
normal
normal hover
normal hover click
normal hover click link
menu_default.png menu_hover.png menu_active.png menu_link.png #button li a background-image: url('menu_default.png') #button
li a:hover background-image: url('menu_hover.png') #button li a:active background-image: url('menu_active.png') #button li a.link background-image: url('menu_link.png')
menu_default.png menu_hover.png menu_active.png menu_link.png #button li a background-image: url('menu_default.png') #button
li a:hover background-image: url('menu_hover.png') #button li a:active background-image: url('menu_active.png') #button li a.link background-image: url('menu_link.png') 4 Requisições
background_menu.png #button li a background: url('background_menu.png') no-repeat 0 0 #button
li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
background_menu.png #button li a background: url('background_menu.png') no-repeat 0 0 #button
li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px
background_menu.png #button li a background: url('background_menu.png') no-repeat 0 0 #button
li a:hover background-position: 0 -39px #button li a:active background-position: 0 -82px #button li a.link background-position: 0 -123px 0 -39px -82px -123px
None
None
background: sprite- image(‘icons/home.png’)
#nav li a.addimage #nav li a.upload #nav li a.export
nav.png #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload #nav
li a.export nav.png
nav.png #nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background:
sprite-image(‘nav/upload.png’) #nav li a.export nav.png
#nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)
#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
#nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)
#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
#nav li a.addimage background: sprite-image(‘nav/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)
#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
#nav li a.addimage background: sprite-image(‘bar/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)
#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png
#nav li a.addimage background: sprite-image(‘bar/addimage.png’) #nav li a.upload background: sprite-image(‘nav/upload.png’)
#nav li a.export background: sprite-image(‘nav/export.png’) nav.png nav.png bar.png
#nav li a.addimage{ background: url(‘/images/nav.png’); } #nav li a.upload{ background:
url(‘/images/nav.png’) 0 -23px; } #nav li a.export{ background: url(‘/images/nav.png’) 0 -46px; }
background: sprite-image(‘nav/addimage.png’)
background: sprite-image(‘nav/addimage.png’)
background: sprite-image(‘nav/addimage.png’, 0, 0)
background: sprite-image(‘nav/addimage.png’, 0, 0)
background: sprite-image(‘nav/addimage.png’, 0, 0, 5px) nav.png nav.png
background: sprite-image(‘nav/addimage.png’,0,0, 5px, 20px) nav.png nav.png
gem install compass lemonade config/compass.rb require “lemonade”
Automatico, quando gera o SASS development production compass compile
Automatico, quando gera o SASS development production compass compile
@emersonvinicius LEMONADE INGREDIENTS PURE RUBY, SASS, COMPASS, RMAGICK, NO ARTIFICIAL
FLAVORS OR SUGAR ADDED. http://bit.ly/lemo-info Obrigado!