Margin/Padding mixins with media queries

style.scss

//This is for bootstrap 4 - given the media queries. Can easily be changed for Bootstrap 3 

$xl-down: "max-width: 9999px";
$lg-down: "max-width: 1199px";
$md-down: "max-width: 991px";
$sm-down: "max-width: 767px";
$xs-down: "max-width: 575px";

$xl-up: "min-width: 1200px";
$lg-up: "min-width: 992px";
$md-up: "min-width: 768px";
$sm-up: "min-width: 576px";
$xs-up: "min-width: 0";

function add-unit-to-value($value, $unit) {
  @return if($value != 0, $value + $unit, 0);
}

@function increment-by-15($i, $unit) {
  @return add-unit-to-value(0 + ($i * 15), $unit);
}

@mixin paddings-margins($i, $size) {
  .padding-#{$size}-#{$i * 15} {
    padding: increment-by-15($i, px);
  }
  .padding-#{$size}-top-#{$i * 15} {
    padding-top: increment-by-15($i, px);
  }
  .padding-#{$size}-right-#{$i * 15} {
    padding-right: increment-by-15($i, px);
  }
  .padding-#{$size}-bottom-#{$i * 15} {
    padding-bottom: increment-by-15($i, px);
  }
  .padding-#{$size}-left-#{$i * 15} {
    padding-left: increment-by-15($i, px);
  }
  .margin-#{$size}-#{$i * 15} {
    margin: increment-by-15($i, px);
  }
  .margin-#{$size}-top-#{$i * 15} {
    margin-top: increment-by-15($i, px);
  }
  .margin-#{$size}-right-#{$i * 15} {
    margin-right: increment-by-15($i, px);
  }
  .margin-#{$size}-bottom-#{$i * 15} {
    margin-bottom: increment-by-15($i, px);
  }
  .margin-#{$size}-left-#{$i * 15} {
    margin-left: increment-by-15($i, px);
  }
}

@for $i from 1 to 15 {
  @include paddings-margins($i, 'xl');
}

@for $i from 1 to 15 {
  @media($lg-down) {
    @include paddings-margins($i, 'lg');
  }
}

@for $i from 1 to 15 {
  @media($md-down) {
    @include paddings-margins($i, 'md');
  }
}

@for $i from 1 to 15 {
  @media($sm-down) {
    @include paddings-margins($i, 'sm');
  }
}

@for $i from 1 to 15 {
  @media($xs-down) {
    @include paddings-margins($i, 'xs');
  }
}