Additional margin & padding helpers

[oscarstranger]

For squeaky clean margins 🛀

Something along the lines of:

@for $i from 1 through 10 {
  $division: $gutter/5;
  $spacing: $division*$i;
  .margin-#{$i}x {
    margin: $spacing;
  }
  .margin-top-#{$i}x {
    margin-top: $spacing;
  }
  .margin-bottom-#{$i}x {
    margin-bottom: $spacing;
  }
  .margin-left-#{$i}x {
    margin-left: $spacing;
  }
  .margin-right-#{$i}x {
    margin-right: $spacing;
  }
  .padding-#{$i}x {
    padding: $spacing;
  }
  .padding-top-#{$i}x {
    padding-top: $spacing;
  }
  .padding-bottom-#{$i}x {
    padding-bottom: $spacing;
  }
  .padding-left-#{$i}x {
    padding-left: $spacing;
  }
  .padding-right-#{$i}x {
    padding-right: $spacing;
  }
}