margin and padding

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  .pm(@counter);
}

.pm(@px){
  .pd-lr-@{px}{
    padding-left:'@{px}px';
    padding-right:'@{px}px';
  }
  .mg-lr-@{px}{
    margin-left:'@{px}px';
    margin-right:'@{px}px';
  }
    .pd-top-@{px}{
    padding-top:'@{px}px';
  }
    .pd-bottom-@{px}{
    padding-bottom:'@{px}px';
  }
}
.loop(32);

sass.scss

$i: 16;
@while $i >= 0 {
 // .item-#{$i} { width: 2em * $i; }
 @if  $i <= 8 or $i %2 ==0{
  @each $side, $s in (top,t),(bottom,b),(left,l),(right,r){
  @each $type, $name in (mg,margin) ,(pd,padding) {
    .#{$type}-#{$s}-#{$i} {
      #{$name}-#{$side}: 1px * $i !important;
    }
  }
  }
    @each $type, $name in (mg,margin) ,(pd,padding) {
    .#{$type}-tb-#{$i} {
          @extend .#{$type}-b-#{$i};
          @extend .#{$type}-t-#{$i};
    }
        .#{$type}-lr-#{$i} {
          @extend .#{$type}-l-#{$i};
          @extend .#{$type}-r-#{$i};
                  
    }
            .#{$type}-tlr-#{$i} {
          @extend .#{$type}-l-#{$i};
          @extend .#{$type}-r-#{$i};
          @extend .#{$type}-t-#{$i};
    }
                .#{$type}-blr-#{$i} {
          @extend .#{$type}-l-#{$i};
          @extend .#{$type}-r-#{$i};
          @extend .#{$type}-b-#{$i};
    }
    .#{$type}-#{$i} {
       @extend .#{$type}-l-#{$i};
          @extend .#{$type}-r-#{$i};
          @extend .#{$type}-b-#{$i};
          @extend .#{$type}-t-#{$i};
    }
    
  }}
 $i: $i - 1;
}