@for $i from 0 through 10 {
  .m-#{$i} {
    margin: 4px * $i;
  }
  .mx-#{$i} {
    margin: 0 4px * $i;
  }
  .my-#{$i} {
    margin: 4px * $i 0;
  }
  .mt-#{$i} {
    margin-top: 4px * $i;
  }
  .mr-#{$i} {
    margin-right: 4px * $i;
  }
  .mb-#{$i} {
    margin-bottom: 4px * $i;
  }
  .ml-#{$i} {
    margin-left: 4px * $i;
  }
}
