Whitespace Helper

whitespace-helper.scss

// Spacing Helpers
// --------------------------------------------------
// ex: mtxl = margin-top: 20px
//
$orientation_list: (
  v,
  h,
  a
);
$direction_list: (
  (t, top),
  (r, right),
  (b, bottom),
  (l, left)
);
$space_sizes:
  (n, 0px!important),
  (s, 5px!important),
  (m, 7px!important),
  (l, 10px!important),
  (xl, 20px!important),
  (xxl, 40px!important),
  (xxxl, 120px!important)
;
@each $direction_list, $direction in $direction_list {
  @each $space_sizes, $size in $space_sizes {
    .p#{$direction_list}#{$space_sizes} {
      padding-#{$direction}: $size;
    }
    .m#{$direction_list}#{$space_sizes} {
      margin-#{$direction}: $size;
    }
  }
}
@each $orientation_list, $orientation in $orientation_list {
  @each $space_sizes, $size in $space_sizes {
    @if $orientation_list == "v" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-bottom: $size;
        padding-top: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-bottom: $size;
        margin-top: $size;
      }
    }
    @else if $orientation_list == "h" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-left: $size;
        padding-right: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-left: $size;
        margin-right: $size;
      }
    }
    @else {
      .p#{$orientation_list}#{$space_sizes} {
        padding: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin: $size;
      }
    }
  }
}