Generated by SassMeister.com.

input.scss

@use "sass:meta";
@use "sass:map";
@use "sass:string";

$breakpoints: (
    'xs': 0,
    'md': 800,
);

@function breakpoint($key) {
    @return map.get($breakpoints, $key) * 1px;
}

@mixin media($minWidth, $maxWidth: null) {
    @if meta.type-of($minWidth) != number {
        $minWidth: breakpoint($minWidth);
    }

    @if ($minWidth != null) {
        @if ($maxWidth != null) {
            @if meta.type-of($maxWidth) != number {
                $maxWidth: breakpoint($maxWidth) - 1px;
            }

            @if ($minWidth <= 0) {
                @media (max-width: $maxWidth) {
                    @content;
                }
            } @else {
                @media (min-width: $minWidth) and (max-width: $maxWidth) {
                    @content;
                }
            }
        } @else {
            @if ($minWidth > 0) {
                @media (min-width: $minWidth) {
                    @content;
                }
            } @else {
                @content;
            }
        }
    } @else {
        @warn "Unfortunately, no value could be retrieved from '#{$minWidth}'." + " Please make sure it is defined in `$breakpoints` map.";
    }
}


@mixin each-breakpoint($map, $properties, $operation: null, $operationValue: null) {
    @each $bp, $value in $map {
        $newValue: $value;

        @if ($operation == '*') {
            $newValue: $value * $operationValue;
        } @else if ($operation == '/') {
            $newValue: $value / $operationValue;
        } @else if ($operation == '+') {
            $newValue: $value + $operationValue;
        } @else if ($operation == '-') {
            $newValue: $value - $operationValue;
        } @else if ($operation != null) {
            @warn 'The operation "#{$operation}" is not allowed. Please use "*", "/", "+" or "-".';
        }

        @include media($bp) {
            @each $property in $properties {
                #{$property}: $newValue;
            }
        }
    }
}

$paddings: (
    'xs': 10px,
    'md': 15px,
);

.paddings {
    @include each-breakpoint($paddings, padding);
}

.horizontal-paddings {
    @include each-breakpoint($paddings, (padding-left, padding-right));
}

.negative-margins {
    @include each-breakpoint($paddings, font-size, '*', -1);
}

.negative-horizontal-margins {
    @include each-breakpoint($paddings, (padding-left, padding-right), '*', -1);
}

output.css

.paddings {
  padding: 10px;
}
@media (min-width: 800px) {
  .paddings {
    padding: 15px;
  }
}

.horizontal-paddings {
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 800px) {
  .horizontal-paddings {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.negative-margins {
  font-size: -10px;
}
@media (min-width: 800px) {
  .negative-margins {
    font-size: -15px;
  }
}

.negative-horizontal-margins {
  padding-left: -10px;
  padding-right: -10px;
}
@media (min-width: 800px) {
  .negative-horizontal-margins {
    padding-left: -15px;
    padding-right: -15px;
  }
}

settings.json

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