Give Your Images Some 'Breathing Room' (SCSS)

Sometimes you want to give a little 'breathing room' around your images within, lets say, a blog article or... whatever.

Bootstrap provides the '.media' class that kind of gets the job done but is not as flexible as I'd like and it's really meant for a specific layout.

There's a UI pattern in the app dev world called 'anchoring' that does what I'm looking for.

So I came up with the following little brain-fart :

// Vars
$spacer: 12px;
$spacer-L: $spacer*2;
$spacer-XL: $spacer*3; 
$spacer-XXL: $spacer*4;

img {
   &.anchor { margin: $spacer;
    &.anchor-left { float: left; margin-left: 0; }
    &.anchor-right { float: right; margin-right: 0; }
    &.anchor-top { margin-top: 0; }
    &.anchor-bottom { margin-bottom: 0; }
    &.anchor-L{ margin: $spacer-L; }
    &.anchor-XL{ margin: $spacer-XL; }
    &.anchor-XXL{ margin: $spacer-XXL; }
    }
}

CodePen Example: http://codepen.io/anon/pen/ufaly