Sass重构帮助：自定义和标准化填充

Question

我正在使用基础6，在最后几个项目中，我一直在使用下面的填充类来调整页面上的元素。

我确信代码可以重新考虑，但我需要一些帮助才能完成。

理想情况下，我希望能够使用单个类为每个边/方向（顶部，底部，右边，x，y等）设置填充，填充量（作为主填充的一部分）如果可能的话，添加一个断点。

欢迎任何建议或建议。

   $main-pad: 50;
$section-pad: rem-calc($main-pad);

@mixin pad-xy($pad-y, $pad-x) {
  @if ($pad-x) {
    padding-left: $pad-x;
    padding-right: $pad-x;
    @include breakpoint(small only) {
      padding-left: $pad-x /2;
      padding-right: $pad-x /2;
    }
  }
  @if ($pad-y) {
    padding-top: $pad-y;
    padding-bottom: $pad-y;
    @include breakpoint(small only) {
      padding-top: $pad-y /2;
      padding-bottom: $pad-y /2;
    }
  }
}
.pad {
  // @include pad-xy($section-pad, null);
  &-y {
    @include pad-xy($section-pad, null);
    &-top {
      padding-top: $section-pad;
      @include breakpoint(small only) {
        padding-top: ($section-pad / 2);
      }
    }
    &-double {
      @include pad-xy($section-pad * 2, null);
    }
    &-half {
      @include pad-xy($section-pad / 2, null);
    }
  }
  &-x {
    @include pad-xy(null,1.25rem);
    &-double {
      @include pad-xy(null, $section-pad * 2 );
    }
  }
}
.pad-bot {
  padding-bottom: $section-pad;
  &-double {
    padding-bottom: ($section-pad * 2);
  }
  &-half {
    padding-bottom: ($section-pad / 2);
  }
}

.no-pad {
  &-sm {
    @include breakpoint(small only) {
      padding: 0 !important;
    }
  }
  &-md {
    @include breakpoint(medium only) {
      padding: 0 !important;
    }
    &--down {
      @include breakpoint(medium down) {
        padding: 0 !important;
      }
    }
  }
  &-lg {
    @include breakpoint(large) {
      padding: 0 !important;
    }
  }
}

.pad-top {
  padding-top: $section-pad;

  &-double {
    padding-top: ($section-pad * 2);
  }

  &-half {
    padding-top: ($section-pad / 2);
  }
  &-quart {
    padding-top: ($section-pad / 4);
  }
  &-na {
    padding-top: 0px !important;
  }
}

@mixin pad-mo-x() {
  @include breakpoint(small down) {
    @include pad-xy(null, $section-pad);
  }
}

.pad-mo {
  &-x {
    @include breakpoint (small down) {
      @include pad-xy(null, $section-pad);
      &-half {
        @include breakpoint (small down) {
          @include pad-xy(null, $section-pad / 2);
        }
      }
    }
  }
  &-y {
    @include breakpoint (small down) {
      @include pad-xy($section-pad, null);
    }
    &-half {
      @include breakpoint (small down) {
        @include pad-xy($section-pad, null);
      }
    }
  }
  &-top {
    @include breakpoint (small down) {
      padding-top: $section-pad;
    }
    &-half {
      @include breakpoint (small down) {
        padding-top: ($section-pad / 2);
      }
    }
    &-na {
      padding-top: 0px !important;
    }
  }
  &-bot {
    &-na {
      @include breakpoint (small down) {
        padding-bottom: 0px;
      }
    }
  }
}

//======================================= margins

@for $i from 0 through 20 {
  .mb#{$i} {
    margin-bottom: #{$i}px;
  }
  .mt#{$i} {
    margin-top: #{$i}px;
  }
  // .pb#{$i} { margin-bottom: #{$i}px; }
  // .pt#{$i} { margin-top: #{$i}px; }
}