Sass mixin to create a load of utility spacing classes and a function for spacing.

sass-utility-class.scss

// Sass mixin to create a load of utility spacing classes (padding and/or margin) and a function for spacing.

// Function to output a spacing pixel value
@function spacing($amount){
  @return $amount * 4px;
}

// Mixin for creating utility spacing classes based on the "spacing()" function
@mixin utility-spacer($property, $amount, $position: null){

	@if $position {
		.utility-#{$property}-#{$position}-#{$amount} {
			#{$property}-#{$position}: spacing($amount) !important;
		}
	}
	@else {
		.utility-#{$property}-#{$amount} {
			#{$property}: spacing($amount) !important;
		}
	}
}

// create '.utility-padding-top-0' classes for margin and padding from "spacing(0)" through to "spacing(8)"
@for $i from 0 through 8 {
	// Margin
	@include utility-spacer(margin, $i);
    @include utility-spacer(margin, $i, top);
    @include utility-spacer(margin, $i, right);
    @include utility-spacer(margin, $i, bottom);
    @include utility-spacer(margin, $i, left);

	// Padding
	@include utility-spacer(padding, $i);
    @include utility-spacer(padding, $i, top);
    @include utility-spacer(padding, $i, right);
    @include utility-spacer(padding, $i, bottom);
    @include utility-spacer(padding, $i, left);
}