Spacing Class

spacing.scss

// Generate inline class names for your elements
//
// <div class="actions u-inset-vert-S">
//    <button type="submit">Totes click me!</button>
// </div>

$spacing-sizes: flush 0, XS 1, S 2, D 4, M 6, L 10 !default;
$spacing-base: 3px !default;

@function spacing($n) {
    @return $n * $spacing-base;
}

@each $size in $spacing-sizes {

    $key: nth($size, 1);
    $value: nth($size, 2);

    // Padding
    .u-pad-none {
        padding: 0 !important;   
    }
    .u-pad-#{$key} {
        padding: spacing($value) !important;
    }
    .u-pad-top-#{$key} {
        padding-top: spacing($value) !important;
    }
    .u-pad-right-#{$key} {
        padding-right: spacing($value) !important;
    }
    .u-pad-bottom-#{$key} {
        padding-bottom: spacing($value) !important;
    }
    .u-pad-left-#{$key} {
        padding-left: spacing($value) !important;
    }
    .u-pad-vert-#{$key} {
        padding-top: spacing($value) !important;
        padding-bottom: spacing($value) !important;
    }
    .u-pad-horz-#{$key} {
        padding-right: spacing($value) !important;
        padding-left: spacing($value) !important;
    }

    // Margin Classes
    .u-inset-#{$key} {
        margin: spacing($value) !important;
    }
    .u-inset-top-#{$key} {
        margin-top: spacing($value) !important;
    }
    .u-inset-right-#{$key} {
        margin-right: spacing($value) !important;
    }
    .u-inset-bottom-#{$key} {
        margin-bottom: spacing($value) !important;
    }
    .u-inset-left-#{$key} {
        margin-left: spacing($value) !important;
    }
    .u-inset-vert-#{$key} {
        margin-top: spacing($value) !important;
        margin-bottom: spacing($value) !important;
    }
    .u-inset-horz-#{$key} {
        margin-right: spacing($value) !important;
        margin-left: spacing($value) !important;
    }

    // Negative Margin Classes
    .u-outset-#{$key} {
        margin: spacing(-$value) !important;
    }
    .u-outset-top-#{$key} {
        margin-top: spacing(-$value) !important;
    }
    .u-outset-right-#{$key} {
        margin-right: spacing(-$value) !important;
    }
    .u-outset-bottom-#{$key} {
        margin-bottom: spacing(-$value) !important;
    }
    .u-outset-left-#{$key} {
        margin-left: spacing(-$value) !important;
    }
    .u-outset-vert-#{$key} {
        margin-top: spacing(-$value) !important;
        margin-bottom: spacing(-$value) !important;
    }
    .u-outset-horz-#{$key} {
        margin-right: spacing(-$value) !important;
        margin-left: spacing(-$value) !important;
    }
}