Bootstrap v4 alpha5 でレスポンシブなマージン・パディングをつける

bootstrap v4 alpha5 で .mt-3 とか .pb-1 とかでマージン・パディングが設定出来ますが、どうせなら pb-lg-1 みたいな感じで幅が lg 以上の時だけマージンが設定される、みたいな風にしたいと思ったので、ざっと作りました。

mixins/_grid.scss の中身と utilities/_spacing.scss の中身を参考にしました。

// bootstrap をimportした後...
@each $breakpoint in map-keys($grid-breakpoints) {
  @each $prop, $abbrev in (margin: m, padding: p) {
    @each $size, $lengths in $spacers {
      $length-x:   map-get($lengths, x);
      $length-y:   map-get($lengths, y);

      @include media-breakpoint-up($breakpoint) {
        .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
        .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top:    $length-y !important; }
        .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right:  $length-x !important; }
        .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
        .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left:   $length-x !important; }

        // Axes
        .#{$abbrev}x-#{$breakpoint}-#{$size} {
          #{$prop}-right:  $length-x !important;
          #{$prop}-left:   $length-x !important;
        }
        .#{$abbrev}y-#{$breakpoint}-#{$size} {
          #{$prop}-top:    $length-y !important;
          #{$prop}-bottom: $length-y !important;
        }
      }
    }
  }
}