SCSS spacing utility

style.scss

$prefix: space;

// All available sizs
$sizes: (
	"n": 0,
	"xs": 5px,
	"s": 10px,
	"m": 15px,
	"l": 20px,
	"xl": 25px
);

// Types of spacing
$types: (
	margin,
	padding
);

// Location of spacing
$locations: (
	"A": "*",
	"T": "top",
	"R": "right",
	"B": "bottom",
	"L": "left"
);

@function getSelectorName($type, $locationKey, $key) {
	@return #{$prefix}-#{$type}-#{$locationKey}-#{$key};
}

@function getPropertyName($type, $locationPosition) {
	@return #{$type}-#{$locationPosition};
}

// Loop through all the types
@each $type in $types {
	// Loop through all the sizes getting the key and the size
	// This is then added onto the type of spacing we are looping through
	@each $sizeObject in $sizes {
		$key: nth($sizeObject, 1);
		$size: nth($sizeObject, 2);
		
		// Loop through all the location types
		// This creates the spacing at the specific location
		@each $location in $locations {
			$locationKey: nth($location, 1);
			
			// To save having an if and then two different selector creators, we create a list
			// The list is then looped through for both 'A' and any single location selector
			$locationPositions: (
				nth($location, 2)
			);
			
			// If this is the all selector we need to loop round all locations apart from all
			// This allows us to create a list which contains all the location definitions
			@if nth($locationPositions, 1) == "*" {
				$locationPositions: ();
				@each $allLocation in $locations {
					$loc: nth($allLocation, 2);
					
					@if $loc != "*" {
						$locationPositions: append($locationPositions, $loc);
					}
				}
			}
			
			.#{getSelectorName($type, $locationKey, $key)} {
				// Loop through each of the locations
				@each $locationPosition in $locationPositions {
					#{getPropertyName($type, $locationPosition)}: $size;
				}
			}
		}
	}
}