$sides: (top, bottom, left, right); // Leave this variable alone

@for $space from 0 through 30 {
  .isa-m-#{$space} {
    margin: #{$space}px !important;
  }

  .isa-p-#{$space} {
    padding: #{$space}px !important;
  }

  .isa-mx-#{$space} {
    margin-left: #{$space}px !important;
    margin-right: #{$space}px !important;
  }

  .isa-my-#{$space} {
    margin-top: #{$space}px !important;
    margin-bottom: #{$space}px !important;
  }

  .isa-px-#{$space} {
    padding-left: #{$space}px !important;
    padding-right: #{$space}px !important;
  }

  .isa-py-#{$space} {
    padding-top: #{$space}px !important;
    padding-bottom: #{$space}px !important;
  }

  @each $side in $sides {
    .isa-m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .isa-p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }

  .isa-m-n#{$space} {
    margin: #{-$space}px !important;
  }

  .isa-p-n#{$space} {
    padding: #{-$space}px !important;
  }

  .isa-mx-n#{$space} {
    margin-left: #{-$space}px !important;
    margin-right: #{-$space}px !important;
  }

  .isa-my-n#{$space} {
    margin-top: #{-$space}px !important;
    margin-bottom: #{-$space}px !important;
  }

  .isa-px-n#{$space} {
    padding-left: #{-$space}px !important;
    padding-right: #{-$space}px !important;
  }

  .isa-py-n#{$space} {
    padding-top: #{-$space}px !important;
    padding-bottom: #{-$space}px !important;
  }

  @each $side in $sides {
    .isa-m#{str-slice($side, 0, 1)}-n#{$space} {
      margin-#{$side}: #{-$space}px !important;
    }

    .isa-p#{str-slice($side, 0, 1)}-n#{$space} {
      padding-#{$side}: #{-$space}px !important;
    }
  }
}
