Smooth SCSS @mixin generating notch and move for the element.

01-file_shift.html

<!-- 
To change the value, change the number,
you may change the number of global shifts ($sft-o) and the number of its replication ($size).
-->
 
<!-- Usage for margins -->
<div class="shift_m_1 shift_m_hz-1 shift_m_vr-1"></div>
<!-- Usage for paddings -->
<div class="shift_p_1 shift_p_hz-1 shift_m_vr-1"></div>

02-file_shift.scss

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_types($types, $size, $val){
    @each $type in $types {
      @if $type == normal {
        @for $i from 1 through $size {
          &[class*="_#{$i}"]{ #{$val}: $sft-o * $i }
        }
      }
      @if $type == horizontal {
        @for $i from 1 through $size {
          &[class*="_hz-#{$i}"]{ #{$val}: 0 $sft-o * $i }
        }
      }
      @if $type == vertical {
        @for $i from 1 through $size {
          &[class*="_vr-#{$i}"]{ #{$val}: ($sft-o * $i) 0 }
        }
      }
    }
  }
  &[class*="_m"]{
    @include shift_types(normal horizontal vertical, 3, margin);
  }
  &[class*="_p"]{
    @include shift_types(normal horizontal vertical, 3, padding);
  }
}