// Spacer function
@function spacing($size, $shim: 0) {
    @return (map-get($spacer-sizes, $size) + $shim);
}

// Spacer mixin
@mixin spacer($prop: margin, $direction: vertical, $size: xxs) {

    @if $direction == vertical {
        #{$prop}-top:           spacing($size) !important;
        #{$prop}-bottom:        spacing($size) !important;

    } @else if $direction == horizontal {
        #{$prop}-left:          spacing($size) !important;
        #{$prop}-right:         spacing($size) !important;

    } @else if $direction == all {
        #{$prop}:               spacing($size) !important;

    } @else {
        #{$prop}-#{$direction}: spacing($size) !important;
    }
}

// Spacer classes
@each $size, $value in $spacer-sizes {
    // Margins
    .m-v-#{$size}   { @include spacer(margin, vertical, $size); }
    .m-h-#{$size}   { @include spacer(margin, horizontal, $size); }
    .m-t-#{$size}   { @include spacer(margin, top, $size); }
    .m-r-#{$size}   { @include spacer(margin, right, $size); }
    .m-b-#{$size}   { @include spacer(margin, bottom, $size); }
    .m-l-#{$size}   { @include spacer(margin, left, $size); }
    .m-#{$size}     { @include spacer(margin, all, $size); }

    // Paddings
    .p-v-#{$size}   { @include spacer(padding, vertical, $size); }
    .p-h-#{$size}   { @include spacer(padding, horizontal, $size); }
    .p-t-#{$size}   { @include spacer(padding, top, $size); }
    .p-r-#{$size}   { @include spacer(padding, right, $size); }
    .p-b-#{$size}   { @include spacer(padding, bottom, $size); }
    .p-l-#{$size}   { @include spacer(padding, left, $size); }
    .p-#{$size}     { @include spacer(padding, all, $size); }
}