space.scss

:root {
  --gutter: 1rem;
}

@media screen and (min-width: 30rem) {
  :root {
    --gutter: 2rem;
  }
}

/*
Applies spacing using multiples of the gutter. This mixin is responsive, in that `var(--gutter)` is a CSS variable that changes values with the viewport.

@param  {('padding'|'margin')}                                    $kind          what property should be used for the spacing
@param  {('top'|'right'|'bottom'|'vertical'|'horizontal'|'all')}  $side          where the spacing should be applied
@param  {number}                                                  $size          how many units of space you want

Example:
  .my-selector {
    @include space('margin', 'horizontal', 2);
  }
*/
@mixin space($kind, $side, $size: 1) {
  @if $kind and $side {
    $spacer: calc(var(--gutter) * #{$size});

    @if $side == "all" {
      #{$kind}: $spacer;
    } @else if $side == "horizontal" {
      #{$kind}-left: $spacer;
      #{$kind}-right: $spacer;
    } @else if $side == "vertical" {
      #{$kind}-top: $spacer;
      #{$kind}-bottom: $spacer;
    } @else {
      #{$kind}-#{$side}: $spacer;
    }
  } @else {
    @warn "space mixin requires a kind (padding or margin) and a side.";
  }
}