Generated by SassMeister.com.

input.scss

$breakpoints: ('xs': 0, 'sm': 600px) !default;
// $breakpoints: ('xs': 0,'sm': 600px,'md': 960px,'lg': 1280px,'xl': 1920px) !default;
$spacings: 4px, 8px !default;
// $spacings: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 56px, 64px !default;
$types: 'margin', 'padding';
@mixin media-min($var) {@media only screen and (min-width: $var) {@content;}}





// No Margin / Padding Classes
// @each $type in (margin), (padding) {
@each $type in $types {
    .no-#{$type} {
        #{$type}: 0 !important;
    }

    @each $direction in (top), (right), (bottom), (left) {
        .no-#{$type}-#{$direction} {
            #{$type}-#{$direction}: 0 !important;
        }
    }

    @each $breakpoint, $res in $breakpoints {
        @include media-min($res) {
            @each $direction in (top), (right), (bottom), (left) {
                .no-#{$type}-#{$direction}-min-#{$breakpoint} {
                    #{$type}-#{$direction}: 0 !important;
                }
            }
        }
    }
}

output.css

.no-margin {
  margin: 0 !important;
}

.no-margin-top {
  margin-top: 0 !important;
}

.no-margin-right {
  margin-right: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.no-margin-left {
  margin-left: 0 !important;
}

@media only screen and (min-width: 0) {
  .no-margin-top-min-xs {
    margin-top: 0 !important;
  }

  .no-margin-right-min-xs {
    margin-right: 0 !important;
  }

  .no-margin-bottom-min-xs {
    margin-bottom: 0 !important;
  }

  .no-margin-left-min-xs {
    margin-left: 0 !important;
  }
}
@media only screen and (min-width: 600px) {
  .no-margin-top-min-sm {
    margin-top: 0 !important;
  }

  .no-margin-right-min-sm {
    margin-right: 0 !important;
  }

  .no-margin-bottom-min-sm {
    margin-bottom: 0 !important;
  }

  .no-margin-left-min-sm {
    margin-left: 0 !important;
  }
}
.no-padding {
  padding: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-right {
  padding-right: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

@media only screen and (min-width: 0) {
  .no-padding-top-min-xs {
    padding-top: 0 !important;
  }

  .no-padding-right-min-xs {
    padding-right: 0 !important;
  }

  .no-padding-bottom-min-xs {
    padding-bottom: 0 !important;
  }

  .no-padding-left-min-xs {
    padding-left: 0 !important;
  }
}
@media only screen and (min-width: 600px) {
  .no-padding-top-min-sm {
    padding-top: 0 !important;
  }

  .no-padding-right-min-sm {
    padding-right: 0 !important;
  }

  .no-padding-bottom-min-sm {
    padding-bottom: 0 !important;
  }

  .no-padding-left-min-sm {
    padding-left: 0 !important;
  }
}

settings.json

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