As the power of CSS processors does not need any explaining, and here i offer a neat trick to witness it.

Although you could do something like this auto-magically with compass,  not all of us like the overkill it brings. For smaller projects and simple exceptions, you can ease your life with this little trick. I am going to show you how handle sprites with images of same dimensions, like this one:

file_type_icons The idea is simple, you will declare the width and height of a single icon, as well as the desired class name. To know when to start in a new row, simply declare a column count.


Here is how this works:

That’s all folks 🙂 happy coding!