Generates margin and padding classes from SCSS to CSS based on 8px grid.

space-classes.scss

$bp-mobile-sm: 321px;
$bp-mobile-md: 376px;
$bp-mobile-lg: 414px;
$bp-tablet-sm: 562px;
$bp-tablet-md: 768px;
$bp-tablet-lg: 826px;
$bp-desktop-sm: 1120px;
$bp-desktop-md: 1366px;
$bp-laptop-md: 1441px;
$bp-desktop-lg: 1536px;
$bp-desktop-hg: 1786px;
// Padding/Margin classes based on 8px grid with queries based on own breakpoints
$sides: (
    "": "",
    "t": "top",
    "b": "bottom",
    "l": "left",
    "r": "right",
);
$breakpoints: (
    "": "",
    "mlg": $bp-mobile-lg,
    "tlg": $bp-tablet-lg,
    "lmd": $bp-laptop-md,
    "dlg": $bp-desktop-lg,
);

@each $breakName, $breakValue in $breakpoints {
  @each $sideName, $sideValue in $sides {
    @for $i from 0 through 16 {

      $property: if($sideName == '', '', -#{$sideValue});
      $space: $i * 8;
      $selector: '';

      @if $breakName != "" {
        $selector: #{$sideName}-#{$breakName}-#{$i};
      } @else {
        $selector: #{$sideName}-#{$i};
      }

      @if $breakName != "" {
        @media (min-width: $breakValue) {
          .m#{$selector} {
            margin#{$property}: #{$space}px;
          }

          .p#{$selector} {
            padding#{$property}: #{$space}px;
          }
        }
      } @else {
        .m#{$selector} {
          margin#{$property}: #{$space}px;
        }

        .p#{$selector} {
          padding#{$property}: #{$space}px;
        }
      }
    }
  }
}