Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
|--------------------------------------------------------------------------
| 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};
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.