$pos: "-top", "-bottom", "-left", "-right", "";

@for $i from 0 through 100 {

  @each $p in $pos {
    .mg#{$p}-#{$i} {
      margin#{$p}: #{$i}px;
    }

    .pd#{$p}-#{$i} {
      padding#{$p}: #{$i}px;
    }
  }

  .mg-vertical-#{$i}{
    margin-top: #{$i}px;  
    margin-bottom: #{$i}px;  
  }

  .mg-horizontal-#{$i}{
    margin-left: #{$i}px;  
    margin-right: #{$i}px;  
  }

  .pd-vertical-#{$i}{
    padding-top: #{$i}px;  
    padding-bottom: #{$i}px;  
  }

  .pd-horizontal-#{$i}{
    padding-left: #{$i}px;  
    padding-right: #{$i}px;  
  }

}