Presentation given to the Philly Sass user group on spriting with the Compass framework

1. POWER SPRITING
WITH COMPASS
Pam Selle
@pamasaur

2. WHO ARE YOU?
Developer at Paperless Post,
client-side engineering
Girl Develop It instructor
Girl Geek Dinners organizer
Rabid Avid cyclist
Problem solver

3. WHAT HAVE YOU DONE?

5. SPRITED THE S*** OUT OF THESE
Merging individually would've taken

6. WHAT IS SPRITING?
Instead of individual background images,
put them all in one image
Simple way to reduce load on your page
When someone already has an image, they don't have to get it again,
since the images are combined into one

7. SIMPLE SPRITE
from CSS-Tricks

8. LESS SIMPLE
from Hulu

10. HOW TO MAKE A SPRITE

11. www.spritecow.com

12. COMPASS DOES IT BETTER!
Compass is a framework that enhances Sass
Along with other great stuff, Compass handles sprites
... impressively so.

13. SPRITING WITH COMPASS
1. Cut individual images from design
2. Place in folder
3. COMPASS MAGIC

14. MORE SPECIFICALLY
@mot"mgs*pg;
ipr iae/.n"

15. COMPASS TOOLS
@nld al<a>srts
icue l-mp-pie;
@nld <a>srt(srt-ae)
icue mp-pie<pienm>;
@nld <a>srt-iesos<pienm>;
icue mp-piedmnin(srt-ae)
@nld <a>srt(srt-ae,tu)
icue mp-pie<pienm> re;
@nld <a>srt-oiin<pienm>;
icue mp-piepsto(srt-ae)

16. OTHER OBSESSIVENESS
<a>lyu:{hrzna,vria,daoa,sat}
mp-aot oiotl etcl ignl mr
<a>saig
mp-pcn
<a>rpa
mp-eet
<a>dmnin
mp-iesos
<a>bs-ls
mp-aecas
<a>cenu
mp-la-p

18. THE END
BY PAM SELLE / THEWEBIVORE.COM