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
78
Lightning Talk: Testes em Javascript
dukex
0
110
Lightning Talk: Fluxo (básico) Ember 1.x.x
dukex
0
110
Concorrência em GO
dukex
0
35
Meetup Go - Como construi o uhuraapp.com
dukex
4
670
Realtime - Usando o MeteorJS
dukex
3
590
Como fazer API melhor que o governo?
dukex
1
680
Raspagem de Dados com Ruby
dukex
1
930
Grid System com Amor
dukex
0
690
Other Decks in Programming
See All in Programming
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
170
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
270
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.5k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
0
140
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
620
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
310
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.5k
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
280
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
940
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
770
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
BBQ
matthewcrist
85
9.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
890
Writing Fast Ruby
sferik
628
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Typedesign – Prime Four
hannesfritz
40
2.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Documentation Writing (for coders)
carmenintech
67
4.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Unsuck your backbone
ammeep
669
57k
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!