bootstrap-spacings.scss

@mixin respond($media) {
  @if $media == mobile {
    @media only screen and (max-width: $screen-xs) { @content; }
  }
  @else if $media == tablet {
    @media only screen and (min-width: $screen-xs) and (max-width: $screen-sm) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $screen-sm) and (max-width: $screen-md) { @content; }
  }
  @else if $media == wide {
    @media only screen and (min-width: $screen-md) { @content; }
  }
}

$list: xs sm md lg;
$sides: t r b l v h;
$sizes: 5 10 15 20 25 30 35 50 80 100;

//Для каждого размера, каждой стороны + вертикально и горизонтально. Под конкретный media-breakpoint
@mixin build($respond, $breakpoint, $size){
  @include respond($respond){
    @each $side in $sides{
      .margin-#{$breakpoint}-#{$side}-#{$size}{
        @if($side == t){
          margin-top: $size+px !important;
        }
        @if($side == r){
          margin-right: $size+px !important;
        }
        @if($side == b){
          margin-bottom: $size+px !important;
        }
        @if($side == l){
          margin-left: $size+px !important;
        }
        @if($side == v){
          margin-top: $size+px !important;
          margin-bottom: $size+px !important;
        }
        @if($side == h){
          margin-left: $size+px !important;
          margin-right: $size+px !important;
        }
      }
    }
    //Для всех сторон
    .margin-#{$breakpoint}-#{$size}{
      margin: $size+px !important;
    }
  }
}

@each $size in $sizes{
  @each $breakpoint in $list{
    @if($breakpoint == xs){
      @include build(mobile, $breakpoint, $size);
    }
    @if($breakpoint == sm){
      @include build(tablet, $breakpoint, $size);
    }
    @if($breakpoint == md){
      @include build(desktop, $breakpoint, $size);
    }
    @if($breakpoint == lg){
      @include build(wide, $breakpoint, $size);
    }

  }
}

//Для каждого размера, каждой стороны + вертикально и горизонтально. Все media
@each $size in $sizes {
  @each $side in $sides {
    .margin-#{$side}-#{$size} {
      @if ($side == t) {
        margin-top: $size+px !important;
      }
      @if ($side == r) {
        margin-right: $size+px !important;
      }
      @if ($side == b) {
        margin-bottom: $size+px !important;
      }
      @if ($side == l) {
        margin-left: $size+px !important;
      }
      @if ($side == v) {
        margin-top: $size+px !important;
        margin-bottom: $size+px !important;
      }
      @if ($side == h) {
        margin-left: $size+px !important;
        margin-right: $size+px !important;
      }
    }
  }
  //Для всех сторон
  .margin-#{$size} {
      margin: $size+px !important;
  }
}