$horizontals: right left;
$verticals: top bottom;

@each $dir in $horizontals {
  .#{$dir}-0 { #{$dir}: 0; }
  .#{$dir}-50 { #{$dir}: 50%; }
  .#{$dir}-50vw { #{$dir}: 50vw; }
  .#{$dir}-100 { #{$dir}: 100%; }
  .#{$dir}-100vw { #{$dir}: 100vw; }
  .#{$dir}-initial { #{$dir}: initial; }

  @each $breakpoint in $breakpoints {
    $bp: nth($breakpoint, 1);
    $letters: nth($breakpoint, 2);

    @media #{$bp} {
      .#{$dir}-0-#{$letters} { #{$dir}: 0; }
      .#{$dir}-50-#{$letters} { #{$dir}: 50%; }
      .#{$dir}-50vw-#{$letters} { #{$dir}: 50vw; }
      .#{$dir}-100-#{$letters} { #{$dir}: 100%; }
      .#{$dir}-100vw-#{$letters} { #{$dir}: 100vw; }
      .#{$dir}-initial-#{$letters} { #{$dir}: initial; }
    }
  }
}

@each $dir in $verticals {
  .#{$dir}-0 { #{$dir}: 0; }
  .#{$dir}-50 { #{$dir}: 50%; }
  .#{$dir}-50vh { #{$dir}: 50vh; }
  .#{$dir}-100 { #{$dir}: 100%; }
  .#{$dir}-100vh { #{$dir}: 100vh; }
  .#{$dir}-initial { #{$dir}: initial; }

  @each $breakpoint in $breakpoints {
    $bp: nth($breakpoint, 1);
    $letters: nth($breakpoint, 2);

    @media #{$bp} {
      .#{$dir}-0-#{$letters} { #{$dir}: 0; }
      .#{$dir}-50-#{$letters} { #{$dir}: 50%; }
      .#{$dir}-50vh-#{$letters} { #{$dir}: 50vh; }
      .#{$dir}-100-#{$letters} { #{$dir}: 100%; }
      .#{$dir}-100vh-#{$letters} { #{$dir}: 100vh; }
      .#{$dir}-initial-#{$letters} { #{$dir}: initial; }
    }
  }
}