Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@mixin margin($side, $size) {
    $margin-size : 0;
    @if $size == 'xs' { $margin-size : 5px; }
    @else if $size == 's' { $margin-size : 10px; }
    @else if $size == 'm' { $margin-size : 15px; }
    @else if $size == 'l' { $margin-size : 20px; }

    @if $side == 'all' {
        .margin--#{$size} {
            margin: $margin-size !important;
        }
    } @else {
        .margin-#{$side}--#{$size} {
            margin-#{$side}: $margin-size !important;
        }
    }
    @if $margin-size != 0 {
      @if $side == 'all' {
          .margin--#{$size}-neg {
              margin: -$margin-size !important;
          }
      } @else {
          .margin-#{$side}--#{$size}-neg {
              margin-#{$side}: -$margin-size !important;
          }
      }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include margin($current-side,$current-size);
  }
}

SassMeister-output.css

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

.margin--xs {
  margin: 5px !important;
}

.margin--xs-neg {
  margin: -5px !important;
}

.margin--s {
  margin: 10px !important;
}

.margin--s-neg {
  margin: -10px !important;
}

.margin--m {
  margin: 15px !important;
}

.margin--m-neg {
  margin: -15px !important;
}

.margin--l {
  margin: 20px !important;
}

.margin--l-neg {
  margin: -20px !important;
}

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

.margin-top--xs {
  margin-top: 5px !important;
}

.margin-top--xs-neg {
  margin-top: -5px !important;
}

.margin-top--s {
  margin-top: 10px !important;
}

.margin-top--s-neg {
  margin-top: -10px !important;
}

.margin-top--m {
  margin-top: 15px !important;
}

.margin-top--m-neg {
  margin-top: -15px !important;
}

.margin-top--l {
  margin-top: 20px !important;
}

.margin-top--l-neg {
  margin-top: -20px !important;
}

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

.margin-right--xs {
  margin-right: 5px !important;
}

.margin-right--xs-neg {
  margin-right: -5px !important;
}

.margin-right--s {
  margin-right: 10px !important;
}

.margin-right--s-neg {
  margin-right: -10px !important;
}

.margin-right--m {
  margin-right: 15px !important;
}

.margin-right--m-neg {
  margin-right: -15px !important;
}

.margin-right--l {
  margin-right: 20px !important;
}

.margin-right--l-neg {
  margin-right: -20px !important;
}

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

.margin-bottom--xs {
  margin-bottom: 5px !important;
}

.margin-bottom--xs-neg {
  margin-bottom: -5px !important;
}

.margin-bottom--s {
  margin-bottom: 10px !important;
}

.margin-bottom--s-neg {
  margin-bottom: -10px !important;
}

.margin-bottom--m {
  margin-bottom: 15px !important;
}

.margin-bottom--m-neg {
  margin-bottom: -15px !important;
}

.margin-bottom--l {
  margin-bottom: 20px !important;
}

.margin-bottom--l-neg {
  margin-bottom: -20px !important;
}

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

.margin-left--xs {
  margin-left: 5px !important;
}

.margin-left--xs-neg {
  margin-left: -5px !important;
}

.margin-left--s {
  margin-left: 10px !important;
}

.margin-left--s-neg {
  margin-left: -10px !important;
}

.margin-left--m {
  margin-left: 15px !important;
}

.margin-left--m-neg {
  margin-left: -15px !important;
}

.margin-left--l {
  margin-left: 20px !important;
}

.margin-left--l-neg {
  margin-left: -20px !important;
}