Bootstrap 3 vertical offset class generator

bootstrap-3-vertical-offset.scss

/*
Requirement: Bootstrap 3

Include this after bootstrap.css. Add class of 
vert-offset-top-value or vert-offset-bottom-value 
to your Bootstrap 3 default rows to prevent row content 
from touching the row content above or below.
Usage:
<div class="vert-offset-top-1">

Explanation: each step is half gutter-width
vert-offset-top-1 adds a top-margin: 15px (half gutter-width)
vert-offset-top-2 adds a top-margin: 30px
vert-offset-top-3 adds a top-margin: 45px
and so on.

vert-offset-top-3-sm is for smartphone only
vert-offset-top-3-md is the same but from tablet and desktop
*/

@mixin vert-offset($offset: 1, $direction: top) {
    margin-#{$direction}: $offset*($grid-gutter-width/2); // for all media queries
    &-sm {
        @media (max-width: $screen-sm-max) {
            margin-#{$direction}: $offset*($grid-gutter-width/2); // just for small devices
        }
    }
    &-md {
        @media (min-width: $screen-md-min) {
            margin-#{$direction}: $offset*($grid-gutter-width/2); // from tablet to above
        }
    }
    &-lg {
        @media (min-width: $screen-lg-min) {
            margin-#{$direction}: $offset*($grid-gutter-width/2); // only desktop
        }
    }
}

@for $i from 1 through 12 {
    .vert-offset-top-#{$i} { /* Vertical Offset Top */
        @include vert-offset($i, top);
    }
    .vert-offset-bottom-#{$i} { /* Vertical Offset Bottom */
        @include vert-offset($i, bottom);
    }
}