Developer Disaster Drawer

It’s very simple and powerful. Look at this:

Imagine that your single element’s height is 38px; Ok, you can define a variable with this:

$height-element:58px;

Ok, and now you have your background sprite:

.element {
 
        position:absolute;
        bottom:0;
        right:0;
        width:94px;
        background:url(sprite.png) no-repeat 0 0;
        height:$height-element;
      }

And for example 4 elements using this sprite (adding another class):

Inside your .element class:

       &.kind-one {
          background-position:0 0;
        }

        &.kind-two {
          background-position:0 #{-($height-element)};
        }

        &.kind-three {
          background-position:0 #{-($height-element*2)};
        }

        &.kind-four {
          background-position:0 #{-($height-element*3)};
        }
 

And if you want to add a new element to the sprite or if one of the elements is changed it’s very simple to be used!