@for $i from 0 through 4 {
  $size: $i * $ui-spacer;

  // Padding
  .ui-p--#{$i} {
    padding: $size !important;
  }
  .ui-pb--#{$i} {
    padding-bottom: $size !important;
  }
  .ui-pl--#{$i} {
    padding-left: $size !important;
  }
  .ui-pr--#{$i} {
    padding-right: $size !important;
  }
  .ui-pt--#{$i} {
    padding-top: $size !important;
  }

  // Margin
  .ui-m--#{$i} {
    margin: $size !important;
  }
  .ui-mb--#{$i} {
    margin-bottom: $size !important;
  }
  .ui-ml--#{$i} {
    margin-left: $size !important;
  }
  .ui-mr--#{$i} {
    margin-right: $size !important;
  }
  .ui-mt--#{$i} {
    margin-top: $size !important;
  }

  // Margin Auto
  .ui-ml--a {
    margin-left: auto !important;
  }
  .ui-mr--a {
    margin-right: auto !important;
  }

  @include ui-from($ui-bp-tablet) {
    // Padding
    .ui-p--#{$i}-tablet {
      padding: $size !important;
    }
    .ui-pb--#{$i}-tablet {
      padding-bottom: $size !important;
    }
    .ui-pl--#{$i}-tablet {
      padding-left: $size !important;
    }
    .ui-pr--#{$i}-tablet {
      padding-right: $size !important;
    }
    .ui-pt--#{$i}-tablet {
      padding-top: $size !important;
    }

    // Margin
    .ui-m--#{$i}-tablet {
      margin: $size !important;
    }
    .ui-mb--#{$i}-tablet {
      margin-bottom: $size !important;
    }
    .ui-ml--#{$i}-tablet {
      margin-left: $size !important;
    }
    .ui-mr--#{$i}-tablet {
      margin-right: $size !important;
    }
    .ui-mt--#{$i}-tablet {
      margin-top: $size !important;
    }
  }

  @include ui-from($ui-bp-desktop) {
    // Padding
    .ui-p--#{$i}-desktop {
      padding: $size !important;
    }
    .ui-pb--#{$i}-desktop {
      padding-bottom: $size !important;
    }
    .ui-pl--#{$i}-desktop {
      padding-left: $size !important;
    }
    .ui-pr--#{$i}-desktop {
      padding-right: $size !important;
    }
    .ui-pt--#{$i}-desktop {
      padding-top: $size !important;
    }

    // Margin
    .ui-m--#{$i}-desktop {
      margin: $size !important;
    }
    .ui-mb--#{$i}-desktop {
      margin-bottom: $size !important;
    }
    .ui-ml--#{$i}-desktop {
      margin-left: $size !important;
    }
    .ui-mr--#{$i}-desktop {
      margin-right: $size !important;
    }
    .ui-mt--#{$i}-desktop {
      margin-top: $size !important;
    }
  }
}