$margins : (
  'top' : 't',
  'bottom' : 'b',
  'left': 'l',
  'right': 'r',
);

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

.my-auto {
  margin-bottom: auto;
  margin-top: auto;
}

// margin : margin-left: 10px;
@each $words, $abbr in $margins {
  @for $i from 0 through 50 {
    .m#{$abbr}-#{$i}, div[class^=col-].m#{$abbr}-#{$i} {
      margin-#{$words}: calc(#{$multiple} * #{$i});
    }
  }
}

// margin breakpoints
@each $words, $abbr in $margins {
  @for $i from 0 through 50 {
    @include margin-breakpoints($words, $abbr, $i);
  }
}

// each margin direction auto. ex: margin-top: auto;
@each $words, $abbr in $margins {
  @include margin-auto($words, $abbr)
}

// margin-left / margin-right
@include mx();

// margin-top / margin-bottom
@include my();

// margin-left / margin-right with breakpoints
@for $i from 0 through 50 {
  @include mx-breakpoints($i);
}

// margin-top / margin-bottom with breakpoints
@for $i from 0 through 50 {
  @include my-breakpoints($i);
}