Vertical spacing mixin for Zurb Foundation

vertical-spacing.scss

/* ===================================
* Vertical spacing for Zurb Foundation Grid
*
* Copyright (c) 2017, Wallace Sidhrée
* MIT License
====================================== */

$vs-positions: top bottom;
$vs-total: 8 !default; // range of classes to be created (in this case 1-8)
$vs: $gutter-size-half;
@mixin vertical-spacing-classes-default {
    @each $p in $vs-positions {
        @for $i from 1 through $vs-total {
            .vs-#{$p}-#{($i)}x {
                margin-#{$p}: ($vs * $i);
            }
        }
    }
}
@mixin vertical-spacing-classes-default-reset {
    @each $p in $vs-positions {
        .vs-#{$p}-0 {
            margin-#{$p}: 0;
        }
    }
}
@mixin vertical-spacing-classes($size) {
    @each $p in $vs-positions {
        @for $i from 1 through $vs-total {
            .vs-#{$p}-#{($i)}x-#{$size} {
                margin-#{$p}: ($vs * $i);
            }
        }
    }
}
@mixin vertical-spacing-classes-reset($size) {
    @each $p in $vs-positions {
        .vs-#{$p}-0-#{$size} {
            margin-#{$p}: 0;
        }
    }
}
@include exports("vertical-spacing") {
    @include vertical-spacing-classes-default;
    @include vertical-spacing-classes-default-reset;
    @media #{$small-only} {
        @include vertical-spacing-classes($size: small-only);
        @include vertical-spacing-classes-reset($size: small-only);
    }
    @media #{$small-up} {
        @include vertical-spacing-classes($size: small);
        @include vertical-spacing-classes-reset($size: small);
    }
    @media #{$smallish-only} {
        @include vertical-spacing-classes($size: smallish-only);
        @include vertical-spacing-classes-reset($size: smallish-only);
    }
    @media #{$smallish-up} {
        @include vertical-spacing-classes($size: smallish);
        @include vertical-spacing-classes-reset($size: smallish);
    }
    @media #{$medium-only} {
        @include vertical-spacing-classes($size: medium-only);
        @include vertical-spacing-classes-reset($size: medium-only);
    }
    @media #{$medium-up} {
        @include vertical-spacing-classes($size: medium);
        @include vertical-spacing-classes-reset($size: medium);
    }
    @media #{$large-up} {
        @include vertical-spacing-classes($size: large);
        @include vertical-spacing-classes-reset($size: large);
    }
}
// output:
// .vs-top-1x { margin-top: .625rem }
// .vs-top-2x { margin-top: 1.25rem }
// .vs-top-3x { margin-top: 1.875rem }
// ...
// ...and relevant/defined media-queries