general css

@mixin set-space($kind, $indicator, $selector) {
  .#{$kind}-#{$indicator}-#{$selector} {
    @if ($indicator == 'all') {
      #{$kind}: ($selector / 16) + rem !important;;
    } @else {
      #{$kind}-#{$indicator}: ($selector / 16) + rem !important;
    }
  }
}

$const: 4;

@for $i from 0 through 8 {
  @include set-space('padding', 'all', $i * $const);
  @include set-space('padding', 'top', $i * $const);
  @include set-space('padding', 'bottom', $i * $const);
  @include set-space('padding', 'left', $i * $const);
  @include set-space('padding', 'right', $i * $const);
  
  @include set-space('margin', 'all', $i * $const);
  @include set-space('margin', 'top', $i * $const);
  @include set-space('margin', 'bottom', $i * $const);
  @include set-space('margin', 'left', $i * $const);
  @include set-space('margin', 'right', $i * $const);
}