Create consistent vertical with classic bootstrap style selectors

vertical-flow.scss

/*scss/SCSS-Mixins-Functions/_mixin-vertical-flow.scss*/

// @function explode() -- split a string into a list of strings
//  {string} $string: the string to be split
//  {string} $delimiter: the boundary string
//  @return {list} the result list
@function explode($string, $delimiter) {
	$result: ();
	@if $delimiter == "" {
		@for $i from 1 through str-length($string) {
			$result: append($result, str-slice($string, $i, $i));
		}
		@return $result;
	}
	$exploding: true;
	@while $exploding {
		$d-index: str-index($string, $delimiter);
		@if $d-index {
			@if $d-index > 1 {
				$result: append($result, str-slice($string, 1, $d-index - 1));
				$string: str-slice($string, $d-index + str-length($delimiter));
			} @else if $d-index == 1 {
				$string: str-slice($string, 1, $d-index + str-length($delimiter));
			} @else {
				$result: append($result, $string);
				$exploding: false;
			}
		} @else {
			$result: append($result, $string);
			$exploding: false;
		}
	}
	@return $result;
}

@function first($list) {
	@return nth($list, 1);
}

@function last($list) {
	@return nth($list, length($list));
}

$sizes: (
		'none': 0,
		'xs': 10px,
		'sm': 20px,
		'md': 35px,
		'lg': 75px,
		'xl': 120px,
);
$sizesPercentage: (
		'none': 0,
		'xs': 2%,
		'sm': 3%,
		'md': 4%,
		'lg': 5%,
		'xl': 7%,
);

$positions: ('top', 'right', 'bottom', 'left');

@mixin vertical-flow($size, $unit: 'px', $type: 'padding') {
	
	$map: $sizes;
	
	$unitArray: explode($unit, '-');
	$unitTop: first($unitArray);
	$unitBottom: last($unitArray);
	
	$mapTop: $sizes;
	$mapBottom: $sizes;
	
	@if $unitTop == '%' {
		$mapTop: $sizesPercentage;
	}
	@if $unitBottom == '%' {
		$mapBottom: $sizesPercentage;
	}
	
	$sizeArray: explode($size, '-');
	$sizeTop: first($sizeArray);
	$sizeBottom: last($sizeArray);
	
	@if map-has-key($map, $sizeTop) {
		#{$type}-top: map-get($mapTop, $sizeTop);
	} @else {
		@error "Size `#{$sizeTop}` not found.";
	}
	
	@if map-has-key($map, $sizeBottom) {
		#{$type}-bottom: map-get($mapBottom, $sizeBottom);
	} @else {
		@error "Size `#{$sizeBottom}` not found.";
	}
}

@each $size, $value in $sizes {
	
	.margin-#{$size} {
		margin: #{$value};
	}
	.padding-#{$size} {
		padding: #{$value};
	}
	
	@each $position in $positions {
		.margin-#{$size}-#{$position} {
			margin-#{$position}: #{$value};
		}
		.padding-#{$size}-#{$position} {
			padding-#{$position}: #{$value};
		}
	}
}

@each $size, $value in $sizesPercentage {
	
	.margin-#{$size}-percent {
		margin: #{$value};
	}
	.padding-#{$size}-percent {
		padding: #{$value};
	}
	
	@each $position in $positions {
		.margin-#{$size}-#{$position}-percent {
			margin-#{$position}: #{$value};
		}
		.padding-#{$size}-#{$position}-percent {
			padding-#{$position}: #{$value};
		}
	}
}