_space-util.scss

/**
 * New spacing utilities
 *
 * Multiple of spacing.
 *
 * 1. We want -half to be displayed in modifiers for spacing(0.5) since class names can't contain dot.
 */

$u-space-units: 0, 0.5, 1, 2, 3, 4, 5;

@mixin generate-spacing-classes-for($margin-side, $responsive-size) {
    @each $spacing in $u-space-units {
        $spacing-label: $spacing;
        $classname: '';
        $responsive-label: '';
        $margin: '';

        @if $margin-side == all {
            @if $spacing == 0.5 {
                $spacing-label: half; // 1
            }
            $classname: space-#{$spacing-label};
            $margin: margin;
        } @else {
            @if $spacing == 0.5 {
                $spacing-label: -half;
            }
            $side-abbr: str-slice($margin-side, 1, 1);
            $classname: space-#{$side-abbr}#{$spacing-label};
            $margin: margin-#{$margin-side};
        }

        @if ($responsive-size != ''){
            $responsive-label: #{$responsive-size}#{'-'};
        }

        .u-#{$responsive-label}#{$classname} {
            #{$margin}: spacing($spacing) !important;
        }
    }
}

$margin-sides: all, left, right, top, bottom;

@each $margin-side in $margin-sides {
    @include generate-spacing-classes-for($margin-side, '');
}

@include responsive-medium {
    .responsive {
        @each $margin-side in $margin-sides {
            @include generate-spacing-classes-for($margin-side, 'md');
        }
    }
}

@include responsive-small {
    .responsive {
        @each $margin-side in $margin-sides {
            @include generate-spacing-classes-for($margin-side, 'sm');
        }
    }
}