$number-of-steps: 20;
$step: 0.5rem;

@mixin offsets {
  @for $i from 0 through $number-of-steps {
      // margins
      .m-#{$i} { margin: $i*$step; };
      .mx-#{$i} { margin-left: $i*$step; margin-right: $i*$step; };
      .my-#{$i} { margin-top: $i*$step; margin-bottom: $i*$step; };
      .mb-#{$i} { margin-bottom: $i*$step; };
      .mt-#{$i} { margin-top: $i*$step; };
      .ml-#{$i} { margin-left: $i*$step; };
      .mr-#{$i} { margin-right: $i*$step; };
      // paddings
      .p-#{$i} { padding: $i*$step; };
      .px-#{$i} { padding-left: $i*$step; padding-right: $i*$step; };
      .py-#{$i} { padding-top: $i*$step; padding-bottom: $i*$step; };
      .pb-#{$i} { padding-bottom: $i*$step; };
      .pt-#{$i} { padding-top: $i*$step; };
      .pl-#{$i} { padding-left: $i*$step; };
      .pr-#{$i} { padding-right: $i*$step; };
  }
}

@include offsets;