spacing.scss

//---------------------------
// Spacing utilities
//---------------------------

$__space-default: 1rem;
@function space($level: 1) {
  @if $level <= 4 {
    @if $level == 0 {
      @return ($__space-default / 2);
    } @else {
      @return ($__space-default * $level);
    }
  } @else {
    @warn "Space ranges from 1–4. You provided #{level}."
  }
}

$spaces: (
  'n': 0,
  's': space(0),
  'm': space(1),
  'l': space(2),
  'xl': space(4),
);

$spacing-edges: (
  'a',
  'v', 'h',
  't', 'r', 'b', 'l',
);

@mixin spacing($kind, $dir, $val) {
  @if $dir == 'a'                { #{$kind}: #{$val}; }
  @if $dir == 'v' or $dir == 't' { #{$kind}-top: #{$val}; }
  @if $dir == 'h' or $dir == 'r' { #{$kind}-right: #{$val}; }
  @if $dir == 'v' or $dir == 'b' { #{$kind}-bottom: #{$val}; }
  @if $dir == 'h' or $dir == 'l' { #{$kind}-left: #{$val}; }
}

@each $dir in $spacing-edges {
  @each $space, $val in $spaces {
    .m#{$dir}-#{$space} {
      @include spacing('margin', $dir, $val);
    }

    .p#{$dir}-#{$space} {
      @include spacing('padding', $dir, $val);
    }
  }
}

.centered {
  margin-left: auto;
  margin-right: auto;
}

@media #{$breakpoint-ns} {
  @each $dir in $spacing-edges {
    @each $space, $val in $spaces {
      .m#{$dir}-#{$space}--ns {
        @include spacing('margin', $dir, $val);
      }

      .p#{$dir}-#{$space}--ns {
        @include spacing('padding', $dir, $val);
      }
    }
  }
}