@for $i from 1 through 5 {
  .mx-#{$i} {
    margin-right: (1px * $i) !important;
    margin-left: (1px * $i) !important;
  }
  .my-#{$i} {
    margin-top: (1px * $i) !important;
    margin-bottom: (1px * $i) !important;
  }
  .mr-#{$i} {
    margin-right: (1px * $i) !important;
  }
  .ml-#{$i} {
    margin-left: (1px * $i) !important;
  }
  .mb-#{$i} {
    margin-bottom: (1px * $i) !important;
  }
  .mt-#{$i} {
    margin-top: (1px * $i) !important;
  }
  .m-#{$i} {
    margin: (1px * $i) !important;
  }
  .px-#{$i} {
    padding-right: (1px * $i) !important;
    padding-left: (1px * $i) !important;
  }
  .py-#{$i} {
    padding-top: (1px * $i) !important;
    padding-bottom: (1px * $i) !important;
  }
  .pr-#{$i} {
    padding-right: (1px * $i) !important;
  }
  .pl-#{$i} {
    padding-left: (1px * $i) !important;
  }
  .pb-#{$i} {
    padding-bottom: (1px * $i) !important;
  }
  .pt-#{$i} {
    padding-top: (1px * $i) !important;
  }
  .p-#{$i} {
    padding: (1px * $i) !important;
  }
}