@mixin make-spacing($property, $side, $spacer, $negative: false) { $css_property: null; $css_sides: null; @if ($property == "m") { $css_property: "margin"; } @else if ($property == "p") { $css_property: "padding"; } @if ($side == "t") { $css_sides: ("top"); } @else if ($side == "b") { $css_sides: ("bottom"); } @else if ($side == "l") { $css_sides: ("left"); } @else if ($side == "r") { $css_sides: ("right"); } @else if ($side == "x") { $css_sides: ("left", "right"); } @else if ($side == "y") { $css_sides: ("top", "bottom"); } @else if ($side == "") { $css_sides: (""); } @each $side in $css_sides { @if ($spacer == "auto") { @if ($side == "") { #{$css_property}: auto; } @else { #{$css_property}-#{$side}: auto; } } @else { @if ($side == "") { @if ($negative == true) { #{$css_property}: - map-get($spacers, $spacer); } @else { #{$css_property}: map-get($spacers, $spacer); } } @else { @if ($negative == true) { #{$css_property}-#{$side}: - map-get($spacers, $spacer); } @else { #{$css_property}-#{$side}: map-get($spacers, $spacer); } } } } } @mixin make-spacings() { $propertys: ("m", "p"); $sides: ("t", "b", "l", "r", "x", "y", ""); $spacers: (0, 1, 2, 3, 4, 5); @each $property in $propertys { @each $side in $sides { @each $spacer in $spacers { .#{$property}#{$side}-#{$spacer} { @include make-spacing($property, $side, $spacer); } } } } @each $side in $sides { .m#{$side}-auto { @include make-spacing("m", $side, "auto"); } } } @include make-spacings();