For the Bootstrap grid: move an element into the grid's gutters

gutter.less

//
//
// ***** Classes to pull or push an element into the gutter(s) of its container *****
//
//
// .gutter-push-XX
// Push the right edge of an element out
// into the right gutter of its container

// .gutter-push-double-XX
// Push the right edge of an element out
// so it abuts the left edge of the element in the column to the right

// .gutter-pull-XX
// Pull the left edge of an element out
// into the left gutter of its container

// .gutter-pull-double-XX
// Pull the left edge of an element out
// so it abuts the right edge of the element in the column to the left

.gutter-breakout(@direction, @breakpoint, @multiplier) when (@multiplier = 0.5) {
    @class: ~"gutter-@{direction}-@{breakpoint}";
    .@{class} {
        & when (@direction = 'push') {
            margin-right: -(@grid-gutter-width * @multiplier);
        }
        & when (@direction = 'pull') {
            margin-left: -(@grid-gutter-width * @multiplier);
        }
    }
}
.gutter-breakout(@direction, @breakpoint, @multiplier) when (@multiplier = 1) {
    @class: ~"gutter-@{direction}-double-@{breakpoint}";
    .@{class} {
        & when (@direction = 'push') {
            margin-right: -(@grid-gutter-width * @multiplier);
        }
        & when (@direction = 'pull') {
            margin-left: -(@grid-gutter-width * @multiplier);
        }
    }
}
.gutter-breakout('push', 'xs', 1);
.gutter-breakout('pull', 'xs', 1);
.gutter-breakout('push', 'xs', 0.5);
.gutter-breakout('pull', 'xs', 0.5);
@media (min-width: @screen-sm-min) {
    .gutter-breakout('push', 'sm', 1);
    .gutter-breakout('pull', 'sm', 1);
    .gutter-breakout('push', 'sm', 0.5);
    .gutter-breakout('pull', 'sm', 0.5);
}
@media (min-width: @screen-md-min) {
    .gutter-breakout('push', 'md', 1);
    .gutter-breakout('pull', 'md', 1);
    .gutter-breakout('push', 'md', 0.5);
    .gutter-breakout('pull', 'md', 0.5);
}
@media (min-width: @screen-lg-min) {
    .gutter-breakout('push', 'lg', 1);
    .gutter-breakout('pull', 'lg', 1);
    .gutter-breakout('push', 'lg', 0.5);
    .gutter-breakout('pull', 'lg', 0.5);
}

//
//
// ***** Reset custom gutters at a given breakpoint *****
//
//
.gutter-push-reset-xs {
    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
        margin-right: 0;
    }
}
.gutter-push-reset-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
        margin-right: 0;
    }
}
.gutter-push-reset-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        margin-right: 0;
    }
}
.gutter-push-reset-lg {
    @media (min-width: @screen-lg-min) {
        margin-right: 0;
    }
}
.gutter-pull-reset-xs {
    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
        margin-left: 0;
    }
}
.gutter-pull-reset-sm {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
        margin-left: 0;
    }
}
.gutter-pull-reset-md {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        margin-left: 0;
    }
}
.gutter-pull-reset-lg {
    @media (min-width: @screen-lg-min) {
        margin-left: 0;
    }
}