.mha { margin-left: auto; margin-right: auto; }
.mla { margin-left: auto; }
.mra { margin-right: auto; }

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

  @media #{$bp} {
    .mha-#{$letters} { margin-left: auto; margin-right: auto; }
    .mla-#{$letters} { margin-left: auto; }
    .mra-#{$letters} { margin-right: auto; }
  }
}

@each $size in $pixelSizes {
  .ma#{$size} { margin: #{$size}px; }
  .mt#{$size} { margin-top: #{$size}px; }
  .mr#{$size} { margin-right: #{$size}px; }
  .mb#{$size} { margin-bottom: #{$size}px; }
  .ml#{$size} { margin-left: #{$size}px; }
  .mh#{$size} { margin-left: #{$size}px; margin-right: #{$size}px; }
  .mv#{$size} { margin-top: #{$size}px; margin-bottom: #{$size}px; }

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

    @media #{$bp} {
      .ma#{$size}-#{$letters} { margin: #{$size}px; }
      .mt#{$size}-#{$letters} { margin-top: #{$size}px; }
      .mr#{$size}-#{$letters} { margin-right: #{$size}px; }
      .mb#{$size}-#{$letters} { margin-bottom: #{$size}px; }
      .ml#{$size}-#{$letters} { margin-left: #{$size}px; }
      .mh#{$size}-#{$letters} { margin-left: #{$size}px; margin-right: #{$size}px; }
      .mv#{$size}-#{$letters} { margin-top: #{$size}px; margin-bottom: #{$size}px; }
    }
  }
}