Generated by SassMeister.com.

input.scss

$breakpoints: (
  xxs:				360px,
  xs:				390px,
  sm:				640px,
  md:				768px,
  lg:				1024px,
  xl:				1200px,
  xxl:				1366px,
  wide:				1400px,
  xwide:			1440px,
  xxwide:			1920px
);

$mq-separator: \@ !default;



$max: 32;
$step: 4;

@for $i from 2 through ceil($max/$step) {
    $value: ($i - 1)*$step + 4;

    @each $mq, $width in $breakpoints {
        @media screen and (min-width:#{$width}) {
            $mq : 'm#{$value}#{$mq-separator}#{$mq}';
            @at-root {
                .#{$mq} {
                    margin-top: #{$value} + px;
                }
            }
        }

    }
}

output.css

@media screen and (min-width: 360px) {
  .m8\@xxs {
    margin-top: 8px;
  }
}
@media screen and (min-width: 390px) {
  .m8\@xs {
    margin-top: 8px;
  }
}
@media screen and (min-width: 640px) {
  .m8\@sm {
    margin-top: 8px;
  }
}
@media screen and (min-width: 768px) {
  .m8\@md {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .m8\@lg {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .m8\@xl {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1366px) {
  .m8\@xxl {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1400px) {
  .m8\@wide {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1440px) {
  .m8\@xwide {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1920px) {
  .m8\@xxwide {
    margin-top: 8px;
  }
}
@media screen and (min-width: 360px) {
  .m12\@xxs {
    margin-top: 12px;
  }
}
@media screen and (min-width: 390px) {
  .m12\@xs {
    margin-top: 12px;
  }
}
@media screen and (min-width: 640px) {
  .m12\@sm {
    margin-top: 12px;
  }
}
@media screen and (min-width: 768px) {
  .m12\@md {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .m12\@lg {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1200px) {
  .m12\@xl {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1366px) {
  .m12\@xxl {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1400px) {
  .m12\@wide {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1440px) {
  .m12\@xwide {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1920px) {
  .m12\@xxwide {
    margin-top: 12px;
  }
}
@media screen and (min-width: 360px) {
  .m16\@xxs {
    margin-top: 16px;
  }
}
@media screen and (min-width: 390px) {
  .m16\@xs {
    margin-top: 16px;
  }
}
@media screen and (min-width: 640px) {
  .m16\@sm {
    margin-top: 16px;
  }
}
@media screen and (min-width: 768px) {
  .m16\@md {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .m16\@lg {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .m16\@xl {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1366px) {
  .m16\@xxl {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1400px) {
  .m16\@wide {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1440px) {
  .m16\@xwide {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1920px) {
  .m16\@xxwide {
    margin-top: 16px;
  }
}
@media screen and (min-width: 360px) {
  .m20\@xxs {
    margin-top: 20px;
  }
}
@media screen and (min-width: 390px) {
  .m20\@xs {
    margin-top: 20px;
  }
}
@media screen and (min-width: 640px) {
  .m20\@sm {
    margin-top: 20px;
  }
}
@media screen and (min-width: 768px) {
  .m20\@md {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .m20\@lg {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1200px) {
  .m20\@xl {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1366px) {
  .m20\@xxl {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1400px) {
  .m20\@wide {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1440px) {
  .m20\@xwide {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1920px) {
  .m20\@xxwide {
    margin-top: 20px;
  }
}
@media screen and (min-width: 360px) {
  .m24\@xxs {
    margin-top: 24px;
  }
}
@media screen and (min-width: 390px) {
  .m24\@xs {
    margin-top: 24px;
  }
}
@media screen and (min-width: 640px) {
  .m24\@sm {
    margin-top: 24px;
  }
}
@media screen and (min-width: 768px) {
  .m24\@md {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .m24\@lg {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1200px) {
  .m24\@xl {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1366px) {
  .m24\@xxl {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1400px) {
  .m24\@wide {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1440px) {
  .m24\@xwide {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1920px) {
  .m24\@xxwide {
    margin-top: 24px;
  }
}
@media screen and (min-width: 360px) {
  .m28\@xxs {
    margin-top: 28px;
  }
}
@media screen and (min-width: 390px) {
  .m28\@xs {
    margin-top: 28px;
  }
}
@media screen and (min-width: 640px) {
  .m28\@sm {
    margin-top: 28px;
  }
}
@media screen and (min-width: 768px) {
  .m28\@md {
    margin-top: 28px;
  }
}
@media screen and (min-width: 1024px) {
  .m28\@lg {
    margin-top: 28px;
  }
}
@media screen and (min-width: 1200px) {
  .m28\@xl {
    margin-top: 28px;
  }
}
@media screen and (min-width: 1366px) {
  .m28\@xxl {
    margin-top: 28px;
  }
}
@media screen and (min-width: 1400px) {
  .m28\@wide {
    margin-top: 28px;
  }
}
@media screen and (min-width: 1440px) {
  .m28\@xwide {
    margin-top: 28px;
  }
}
@media screen and (min-width: 1920px) {
  .m28\@xxwide {
    margin-top: 28px;
  }
}
@media screen and (min-width: 360px) {
  .m32\@xxs {
    margin-top: 32px;
  }
}
@media screen and (min-width: 390px) {
  .m32\@xs {
    margin-top: 32px;
  }
}
@media screen and (min-width: 640px) {
  .m32\@sm {
    margin-top: 32px;
  }
}
@media screen and (min-width: 768px) {
  .m32\@md {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .m32\@lg {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1200px) {
  .m32\@xl {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1366px) {
  .m32\@xxl {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1400px) {
  .m32\@wide {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1440px) {
  .m32\@xwide {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1920px) {
  .m32\@xxwide {
    margin-top: 32px;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}