Responsive Spacer-Mixin for foundation 6

_spacer.scss

$spaceamounts: (0, 5, 10, 15, 20, 30, 40, 50); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom);
$space-attr: ("margin", "padding"); // margin or padding

@each $breakpoint in $breakpoint-classes {

    @if $breakpoint == 'small' {
        @each $space in $spaceamounts {

            @each $side in $sides {
                @each $attr in $space-attr {
                    .#{str-slice($attr, 0, 1)}#{str-slice($side, 0, 1)}-#{$space} {
                        #{$attr}-#{$side}: rem-calc($space) !important;
                    }
                }

            }
        }
    } @else {
        @include breakpoint($breakpoint) {
            @each $space in $spaceamounts {
                @each $side in $sides {
                    @each $attr in $space-attr {
                        .#{$breakpoint}-#{str-slice($attr, 0, 1)}#{str-slice($side, 0, 1)}-#{$space} {
                            #{$attr}-#{$side}: rem-calc($space) !important;
                        }
                    }
                }
            }
        }
    }
}