This SASS code helps u to easily create css spacing classes(aka margins and paddings) and helps u to apply a specific spacing at specific screen size

app.scss

$break-points: ("xs": ("max": 639), "sm": ("min": 640, "max": 767), "md": ("min": 768, "max": 1023), "lg": ("min": 1024, "max": 1279), "xl": ("min": 1280));
$space-size: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$sides: (top, bottom, left, right);
@mixin basic-sizing($break-size:'') {
    @each $space in $space-size {
        .m#{$break-size}-#{$space} {
            margin: #{$space}px;
        }
        .p#{$break-size}-#{$space} {
            padding: #{$space}px;
        }
        // .m-#{$break}-#{$space}
        @each $side in $sides {
            .m#{str-slice($side, 0, 1)}#{$break-size}-#{$space} {
                margin-#{$side}: #{$space}px !important;
            }
            .p#{str-slice($side, 0, 1)}#{$break-size}-#{$space} {
                padding-#{$side}: #{$space}px !important;
            }
        }
    }
}

@include basic-sizing;

@each $break in map-keys($break-points) {
    @if($break=="xs"or $break=="xl") {
        $minOrmax: nth(map-keys(map-get($break-points, $break)), 1);
        $innerval: map-get(map-get($break-points, $break), $minOrmax);
        @media (#{$minOrmax}-width: #{$innerval}px) {
            @include basic-sizing(-#{$break});
        }
    }
    @else {
        $values: map-values(map-get($break-points, $break));
        @media (min-width: #{nth($values,1)}px) and (max-width: #{nth($values,2)}px) {
            @include basic-sizing(-#{$break});
        }
    }
}