Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.6.2)
// ----

@mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base', $remove: null) {
	@each $key, $value in $map {
		@if($remove){
			$key: str-replace($key, $remove, '');
		}
		&#{if($key != $base, #{$prefix}#{$key}, '')} {
			@if type-of($value) == 'map' {
				@include modifiers($value, $attribute, $prefix, $separator, $base, $remove);
			}
			@else if type-of($attribute) == 'list' {
				@each $a in $attribute {
					#{$a}: $value;
				}
			}
			@else {
				#{$attribute}: $value;
			}
		}
	}
}


$spacing-map: (
  '0': (0),
  'half': (4px),
  '1': (8px),
  '2': (16px),
  '3': (24px),
  '4': (32px),
  '5': (48px),
  '6': (64px),
  '7': (96px),
  '8': (128px),
);

.p {
	@include modifiers(
		$map: $spacing-map,
		$attribute: 'padding',
		$prefix: '--'
	);
}

.p-x {
	@include modifiers(
		$map: $spacing-map,
		$attribute: ('padding-left', 'padding-right'),
		$prefix: '--'
	);
}

SassMeister-output.css

.p--0 {
  padding: 0;
}
.p--half {
  padding: 4px;
}
.p--1 {
  padding: 8px;
}
.p--2 {
  padding: 16px;
}
.p--3 {
  padding: 24px;
}
.p--4 {
  padding: 32px;
}
.p--5 {
  padding: 48px;
}
.p--6 {
  padding: 64px;
}
.p--7 {
  padding: 96px;
}
.p--8 {
  padding: 128px;
}

.p-x--0 {
  padding-left: 0;
  padding-right: 0;
}
.p-x--half {
  padding-left: 4px;
  padding-right: 4px;
}
.p-x--1 {
  padding-left: 8px;
  padding-right: 8px;
}
.p-x--2 {
  padding-left: 16px;
  padding-right: 16px;
}
.p-x--3 {
  padding-left: 24px;
  padding-right: 24px;
}
.p-x--4 {
  padding-left: 32px;
  padding-right: 32px;
}
.p-x--5 {
  padding-left: 48px;
  padding-right: 48px;
}
.p-x--6 {
  padding-left: 64px;
  padding-right: 64px;
}
.p-x--7 {
  padding-left: 96px;
  padding-right: 96px;
}
.p-x--8 {
  padding-left: 128px;
  padding-right: 128px;
}

@mattfelten, this is awesome. Could you please explain how negative values (eg. -4px) can be supported? Is there a way to handle @media queries in the @mixin for handy breakpoint changes?