utils-padding-margin.scss

utils-padding-margin.scss

$scopes: (
	margin: mar,
	padding: pad
);

$locations: (
	top: t,
	bottom: b,
	left: l,
	right: r,
	x: x,
	y: y
);

$ems: (
	.25em: xs,
	.5em: sm,
	1em: md,
	1.5em: lg,
	2em: xl
);

@mixin spacing($scope: padding, $location: top, $size: 1em){
  
	@if $location == "y" {
		#{$scope}-top: $size;
		#{$scope}-bottom: $size;
	}
	@elseif $location == "x" {
		#{$scope}-left: $size;
		#{$scope}-right: $size;
	}
	@else {
		#{$scope}-#{$location}: $size;
	}

}

@each $size, $size_short_name in $ems {
  
	@each $scope, $scope_short_name in $scopes {
    
		@each $location, $location_short_name in $locations {
      
			.#{$scope_short_name}-#{$location_short_name}-#{$size_short_name} {
				@include spacing($scope, $location, $size);
			}
      
		}
	
	}
  
}

@mixin margin( $location: top, $size: 1em) {
	@include spacing('margin', $location, $size);
}

@mixin padding($location: top, $size: 1em) {
	@include spacing('padding', $location, $size);
}