O'Reilly logo

Instant SASS CSS How-to by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating sprites using Compass and SASS (Become an expert)

One of the best ways to reduce server requests, and consequently response times for a site is to create sprites from your images. You could easily use a website to do this, or you can use the power of Compass to do this for you. We're going to look at how to do this using some credit card images, which could easily appear on an e-commerce site.

Getting ready

For this recipe, you will need some suitable images that are a maximum of 32 px square. I have used a selection of 12 credit card images which are available at http://www.smashingmagazine.com/2010/10/21/free-png-credit-card-debit-card-and-payment-icons-set-18-icons/. You will of course also need your text editor and Scout up and running. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required