Create Spacing Classes in SASS

spacing.scss

$spacing-values: (
	1,
	2,
	3,
	4,
	5,
);

@each $val in $spacing-values {
	// REMS
	.m-#{$val} {
		margin: #{$val}rem;
	}
	.mt-#{$val} {
		margin-top: #{$val}rem;
	}
	.mb-#{$val} {
		margin-bottom: #{$val}rem;
	}
	.mx-#{$val} {
		margin-left: #{$val}rem;
		margin-right: #{$val}rem;
	}
	.my-#{$val} {
		margin-top: #{$val}rem;
		margin-bottom: #{$val}rem;
	}
	//
	.p-#{$val} {
		padding: #{$val}rem;
	}
	.pt-#{$val} {
		padding-top: #{$val}rem;
	}
	.pb-#{$val} {
		padding-bottom: #{$val}rem;
	}
	.px-#{$val} {
		padding-left: #{$val}rem;
		padding-right: #{$val}rem;
	}
	.py-#{$val} {
		padding-top: #{$val}rem;
		padding-bottom: #{$val}rem;
	}
	// PIXELS
	$pixels: $val * 10;
	.m-#{$pixels} {
		margin: #{$pixels}px;
	}
	.mt-#{$pixels} {
		margin-top: #{$pixels}px;
	}
	.mb-#{$pixels} {
		margin-bottom: #{$pixels}px;
	}
	.mx-#{$pixels} {
		margin-left: #{$pixels}px;
		margin-right: #{$pixels}px;
	}
	.my-#{$pixels} {
		margin-top: #{$pixels}px;
		margin-bottom: #{$pixels}px;
	}
	//
	.p-#{$pixels} {
		padding: #{$pixels}px;
	}
	.pt-#{$pixels} {
		padding-top: #{$pixels}px;
	}
	.pb-#{$pixels} {
		padding-bottom: #{$pixels}px;
	}
	.px-#{$pixels} {
		padding-left: #{$pixels}px;
		padding-right: #{$pixels}px;
	}
	.py-#{$pixels} {
		padding-top: #{$pixels}px;
		padding-bottom: #{$pixels}px;
	}
}