Add support for positioning sprites with percentages

(This is a continuation of https://github.com/chriseppstein/compass/pull/1106, rebased onto master instead of stable.)

The default behaviour for sprites is to position the background image
with pixels. This works if the sprite itself will always be displayed in
its original pixel dimensions. However, as more and more websites turn
responsive, is is vital that we can scale images up and down (mostly
down).

This commit will add support for positioning the background image with
percentages instead of pixels. This will make it easier to scale a
sprite image up and down. You won't be able to do it out of the box
though, you still need to do some manual work:

Using "background-size: cover" instead of the default (auto)
Placing the sprite in a container with a specific width, then using the following magic to the sprite: height: 0; padding-top: 75%; //image height/width ratio width: 100%;