Utilities for controlling an element's padding and margin.

sizing-helpers.scss

/*
|--------------------------------------------------------------------------
| Spacing
|--------------------------------------------------------------------------
|
| Utilities for controlling an element's padding and margin.
|
*/

$spacing-class: (
    "p": "padding",
    "m": "margin",
);

$spacing-sides: (
    "": "",
    "t": "-top",
    "b": "-bottom",
    "l": "-left",
    "r": "-right",
    "x": "-left" "-right",
    "y": "-top" "-bottom",
);

$spacing-spaces: (
    "-0": "0",
    "-1": "0.25rem",
    "-2": "0.5rem",
    "-3": "0.75rem",
    "-4": "1rem",
    "-6": "1.5rem",
    "-8": "2rem",
    "-px": "1px",
    "-auto": "auto",
);

@each $className, $classProperty in $spacing-class {
    @each $sideName, $sideProperty in $spacing-sides {
        @each $spaceName, $spaceProperty in $spacing-spaces {

            .#{$className}#{$sideName}#{$spaceName} {
                @if type-of($sideProperty) == "list" {
                    @each $side in $sideProperty {
                        #{$classProperty}#{$side}: #{$spaceProperty};
                    }
                } @else {
                    #{$classProperty}#{$sideProperty}: #{$spaceProperty};
                }
            }

            @if $classProperty == "margin" {
                .-#{$className}#{$sideName}#{$spaceName} {
                    @if type-of($sideProperty) == "list" {
                        @each $side in $sideProperty {
                            #{$classProperty}#{$side}: -#{$spaceProperty};
                        }
                    } @else {
                        #{$classProperty}#{$sideProperty}: -#{$spaceProperty};
                    }
                }
            }

        }
    }
}