@mixin add-sizing-breakpoints($sel) {
    @each $name, $bp in $breakpoints {
        $spacing: ($spacing-iter * $spacing-magnitude) * $spacing-iter + unquote($spacing-unit);
        &#{$sel}{
            @if $name == 'blank' {

            } @else {
                &-#{$name} {
                    @content;
                }
            }
        }
    }
};

@each $name, $bp in $breakpoints {
    $spacing: ($spacing-iter * $spacing-magnitude) * $spacing-iter + unquote($spacing-unit);

    $prop: '-'+quote(#{$name});

    @if $name == 'blank' {
        $prop: '';
    }
        @media (min-width: $bp) {
            .m {
                &-none#{$prop} {margin: 0;}
                &-auto#{$prop} {margin: auto;}
                &l-none#{$prop}, &x-none#{$prop} {margin-left: 0;}
                &l-auto#{$prop}, &x-auto#{$prop} {margin-left: auto;}
                &t-none#{$prop}, &y-none#{$prop} {margin-top: 0;}
                &t-auto#{$prop}, &y-auto#{$prop} {margin-top: auto;}
                &r-none#{$prop}, &x-none#{$prop} {margin-right: 0;}
                &r-auto#{$prop}, &x-auto#{$prop} {margin-right: auto;}
                &b-none#{$prop}, &y-none#{$prop} {margin-bottom: 0;}
                &b-auto#{$prop}, &y-auto#{$prop} {margin-bottom: auto;}

                @include add-sizing-breakpoints('x'+quote(#{$prop})){margin-left: $spacing; margin-right: $spacing;}
                @include add-sizing-breakpoints('y'+quote(#{$prop})){margin-top: $spacing; margin-bottom: $spacing;}
                @include add-sizing-breakpoints('l'+quote(#{$prop})){margin-left: $spacing;}
                @include add-sizing-breakpoints('t'+quote(#{$prop})){margin-top: $spacing;}
                @include add-sizing-breakpoints('r'+quote(#{$prop})){margin-right: $spacing;}
                @include add-sizing-breakpoints('b'+quote(#{$prop})){margin-bottom: $spacing;}
            }

            .p {
                &-none#{$prop} {padding: 0;}
                &-auto#{$prop} {padding: auto;}
                &l-none#{$prop}, &x-none#{$prop} {padding-left: 0;}
                &l-auto#{$prop}, &x-auto#{$prop} {padding-left: auto;}
                &t-none#{$prop}, &y-none#{$prop} {padding-top: 0;}
                &t-auto#{$prop}, &y-auto#{$prop} {padding-top: auto;}
                &r-none#{$prop}, &x-none#{$prop} {padding-right: 0;}
                &r-auto#{$prop}, &x-auto#{$prop} {padding-right: auto;}
                &b-none#{$prop}, &y-none#{$prop} {padding-bottom: 0;}
                &b-auto#{$prop}, &y-auto#{$prop} {padding-bottom: auto;}

                @include add-sizing-breakpoints('x'+quote(#{$prop})){padding-left: $spacing; padding-right: $spacing;}
                @include add-sizing-breakpoints('y'+quote(#{$prop})){padding-top: $spacing; padding-bottom: $spacing;}
                @include add-sizing-breakpoints('l'+quote(#{$prop})){padding-left: $spacing;}
                @include add-sizing-breakpoints('t'+quote(#{$prop})){padding-top: $spacing;}
                @include add-sizing-breakpoints('r'+quote(#{$prop})){padding-right: $spacing;}
                @include add-sizing-breakpoints('b'+quote(#{$prop})){padding-bottom: $spacing;}
            }

            .gutters {
                &-none#{$prop} {margin: 0;}
                @include add-sizing-breakpoints(('-top'+quote(#{$prop}))){
                    :not(:first-child){margin-top: $spacing;}
                }
                // &-top#{$prop} > {:not(:first-child){margin-top: $spacing;}}
                // &-bottom#{$prop} > {:not(:first-child){margin-bottom: $spacing;}}
                // &-left#{$prop} > {:not(:first-child){margin-left: $spacing;}}
                // &-right#{$prop} > {:not(:first-child){margin-right: $spacing;}}
            }

        }

    $spacing-iter: $spacing-iter + 1;

}