CSS Sprites With Sass & Compass

Originally published at: http://www.sitepoint.com/css-sprites-sass-compass/

Building robust websites and applications isn’t just writing semantic HTML and fancy CSS. It’s also important to keep an eye on web performance from the beginning of your projects. There are many techniques that can help with this, and thus create a better user experience. Creating CSS sprites is one of them. Using this technique you combine all of your small images (sprites) into a larger image (sprite sheet) along with CSS to position it.

You can generate your sprites using different tools, yet in this article I’ll show you how to achieve it using Compass. Before that, let me introduce you to the project that will be used for this article.

Setting up a project

To better demonstrate how Compass’s sprite builder works, I set up a new project. Here’s the structure of it:

├── config.rb
├── index.html
├── stylesheets/
│     ├── ie.css
│     ├── print.css
│     └── screen.css
├── sass/
│     ├── ie.scss
│     ├── print.scss
│     └── screen.scss
└── images/
    └── icons/
        ├── arrow-down.png
        ├── facebook-active.png
        ├── facebook-hover.png
        ├── facebook.png
        ├── twitter-active.png
        ├── twitter-hover.png
        ├── twitter.png
        └── zuckerberg.png

Notice, there’s an icons folder within the images folder, which contains all the images that will be used for this project.

Continue reading this article on SitePoint

I did do a write up on SVG sprites, with Gulp and Sass if anyone is interested.

Great article though!

Interesting! Thanks for sharing it!