support-foo/web

$breakpoint-sm: '(min-width: 40em)';
$breakpoint-md: '(min-width: 52em)';
$breakpoint-lg: '(min-width: 64em)';

$breakpoints: (
  "sm": $breakpoint-sm,
  "md": $breakpoint-md,
  "lg": $breakpoint-lg,
);

$scale: (
  "0": 0,
  "1": 6px,
  "2": 12px,
  "3": 24px,
  "4": 48px
);


@each $index, $value in $scale {

  .m#{$index} { margin: $value }
  .mt#{$index} { margin-top: $value }
  .mr#{$index} { margin-right: $value }
  .mb#{$index} { margin-bottom: $value }
  .ml#{$index} { margin-left: $value }

  .mxn#{$index} {
    margin-right: -$value;
    margin-left: -$value;
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  // Paddings

  .p#{$index} {
    padding: $value
  }

  .px#{$index} {
    padding-left: $value;
    padding-right: $value;
  }

  .py#{$index} {
    padding-top: $value;
    padding-bottom: $value;
  }

  @each $prefix, $breakpoint in $breakpoints {
    @media #{$breakpoint} {

      // Margins

      .#{$prefix}-m#{$index} { margin: $value }
      .#{$prefix}-mt#{$index} { margin-top: $value }
      .#{$prefix}-mr#{$index} { margin-right: $value }
      .#{$prefix}-mb#{$index} { margin-bottom: $value }
      .#{$prefix}-ml#{$index} { margin-left: $value }

      .#{$prefix}-mxn#{$index} {
        margin-right: -$value;
        margin-left: -$value;
      }

      // Paddings

      .#{$prefix}-p#{$index} {
        padding: $value
      }

      .#{$prefix}-px#{$index} {
        padding-left: $value;
        padding-right: $value;
      }

      .#{$prefix}-py#{$index} {
        padding-top: $value;
        padding-bottom: $value;
      }
    }
  }
}