Two forms of spaces. Large and small.

spacing.scss

/**
 * Apply spacing to elements throughout the site and keep it uniform.
 * @param  {[string]} $element:   'margin'      [Margin or Padding]
 * @param  {[string]} $direction: 'top'         [top, bottom, left, right, both or all]
 * @param  {[string]} $size:      'small'       [small or large]
 */

$small_space: 2rem;
$large_space: 4rem;

@mixin spacing($element: 'margin', $direction: 'top', $size: 'small'){
  // If direction is both, apply to top and bottom
  @if $direction == 'both' {
    @if $size == 'large'{
      #{$element}-top: $large_space / 2;
      #{$element}-bottom: $large_space / 2;
      @media only screen and #{$tablet} {
        #{$element}-top: $large_space;
        #{$element}-bottom: $large_space;
      }
    } @else {
      #{$element}-top: $small_space / 2;
      #{$element}-bottom: $small_space / 2;
      @media only screen and #{$tablet} {
        #{$element}-top: $small_space;
        #{$element}-bottom: $small_space;
      }
    }
  } 
  // If direction is all, apply to all sides
  @else if $direction == 'all'{
    @if $size == 'large'{
      #{$element}: $large_space / 2;
      @media only screen and #{$tablet} {
        #{$element}: $large_space;
      }
    } @else {
      #{$element}: $small_space / 2;
      @media only screen and #{$tablet} {
        #{$element}: $small_space;
      }
    }
  } 
  // If direction is not set, apply defaults
  @else {
    @if $size == 'large'{
      #{$element}-#{$direction}: $large_space / 2;
      @media only screen and #{$tablet} {
        #{$element}-#{$direction}: $large_space;
      }
    } @else {
      #{$element}-#{$direction}: $small_space / 2;
      @media only screen and #{$tablet} {
        #{$element}-#{$direction}: $small_space;
      }
    }
  }
}