CSS Utils

spacing-shortcuts.css

.m-2 { margin: -2em !important; }

.ml-2 { margin-left: -2em !important; }

.mr-2 { margin-right: -2em !important; }

.mt-2 { margin-top: -2em !important; }

.mb-2 { margin-bottom: -2em !important; }

.m-1 { margin: -1em !important; }

.ml-1 { margin-left: -1em !important; }

.mr-1 { margin-right: -1em !important; }

.mt-1 { margin-top: -1em !important; }

.mb-1 { margin-bottom: -1em !important; }

.m0 { margin: 0em !important; }

.ml0 { margin-left: 0em !important; }

.mr0 { margin-right: 0em !important; }

.mt0 { margin-top: 0em !important; }

.mb0 { margin-bottom: 0em !important; }

.m1 { margin: 1em !important; }

.ml1 { margin-left: 1em !important; }

.mr1 { margin-right: 1em !important; }

.mt1 { margin-top: 1em !important; }

.mb1 { margin-bottom: 1em !important; }

.m2 { margin: 2em !important; }

.ml2 { margin-left: 2em !important; }

.mr2 { margin-right: 2em !important; }

.mt2 { margin-top: 2em !important; }

.mb2 { margin-bottom: 2em !important; }

.m3 { margin: 3em !important; }

.ml3 { margin-left: 3em !important; }

.mr3 { margin-right: 3em !important; }

.mt3 { margin-top: 3em !important; }

.mb3 { margin-bottom: 3em !important; }

.m4 { margin: 4em !important; }

.ml4 { margin-left: 4em !important; }

.mr4 { margin-right: 4em !important; }

.mt4 { margin-top: 4em !important; }

.mb4 { margin-bottom: 4em !important; }

.m5 { margin: 5em !important; }

.ml5 { margin-left: 5em !important; }

.mr5 { margin-right: 5em !important; }

.mt5 { margin-top: 5em !important; }

.mb5 { margin-bottom: 5em !important; }

.m6 { margin: 6em !important; }

.ml6 { margin-left: 6em !important; }

.mr6 { margin-right: 6em !important; }

.mt6 { margin-top: 6em !important; }

.mb6 { margin-bottom: 6em !important; }

.m7 { margin: 7em !important; }

.ml7 { margin-left: 7em !important; }

.mr7 { margin-right: 7em !important; }

.mt7 { margin-top: 7em !important; }

.mb7 { margin-bottom: 7em !important; }

.m8 { margin: 8em !important; }

.ml8 { margin-left: 8em !important; }

.mr8 { margin-right: 8em !important; }

.mt8 { margin-top: 8em !important; }

.mb8 { margin-bottom: 8em !important; }

.p-2 { padding: -2em !important; }

.pl-2 { padding-left: -2em !important; }

.pr-2 { padding-right: -2em !important; }

.pt-2 { padding-top: -2em !important; }

.pb-2 { padding-bottom: -2em !important; }

.p-1 { padding: -1em !important; }

.pl-1 { padding-left: -1em !important; }

.pr-1 { padding-right: -1em !important; }

.pt-1 { padding-top: -1em !important; }

.pb-1 { padding-bottom: -1em !important; }

.p0 { padding: 0em !important; }

.pl0 { padding-left: 0em !important; }

.pr0 { padding-right: 0em !important; }

.pt0 { padding-top: 0em !important; }

.pb0 { padding-bottom: 0em !important; }

.p1 { padding: 1em !important; }

.pl1 { padding-left: 1em !important; }

.pr1 { padding-right: 1em !important; }

.pt1 { padding-top: 1em !important; }

.pb1 { padding-bottom: 1em !important; }

.p2 { padding: 2em !important; }

.pl2 { padding-left: 2em !important; }

.pr2 { padding-right: 2em !important; }

.pt2 { padding-top: 2em !important; }

.pb2 { padding-bottom: 2em !important; }

.p3 { padding: 3em !important; }

.pl3 { padding-left: 3em !important; }

.pr3 { padding-right: 3em !important; }

.pt3 { padding-top: 3em !important; }

.pb3 { padding-bottom: 3em !important; }

.p4 { padding: 4em !important; }

.pl4 { padding-left: 4em !important; }

.pr4 { padding-right: 4em !important; }

.pt4 { padding-top: 4em !important; }

.pb4 { padding-bottom: 4em !important; }

.p5 { padding: 5em !important; }

.pl5 { padding-left: 5em !important; }

.pr5 { padding-right: 5em !important; }

.pt5 { padding-top: 5em !important; }

.pb5 { padding-bottom: 5em !important; }

.p6 { padding: 6em !important; }

.pl6 { padding-left: 6em !important; }

.pr6 { padding-right: 6em !important; }

.pt6 { padding-top: 6em !important; }

.pb6 { padding-bottom: 6em !important; }

.p7 { padding: 7em !important; }

.pl7 { padding-left: 7em !important; }

.pr7 { padding-right: 7em !important; }

.pt7 { padding-top: 7em !important; }

.pb7 { padding-bottom: 7em !important; }

.p8 { padding: 8em !important; }

.pl8 { padding-left: 8em !important; }

.pr8 { padding-right: 8em !important; }

.pt8 { padding-top: 8em !important; }

.pb8 { padding-bottom: 8em !important; }

.ma { margin: auto; }

.mra { margin-right: auto; }

.mla { margin-left: auto; }

.mta { margin-top: auto; }

.mba { margin-bottom: auto; }

spacing-shortcuts.scss

@mixin prefixed-margin-padding($style:'margin', $prefix:'.m', $unit: 'em'){

  $dirs: ('l', 'r', 't', 'b');
  $dirstyle: ('left', 'right', 'top' ,'bottom');

  @for $i from -2 through 8 {
    #{$prefix}#{$i}{
      #{$style}: #{$i}#{$unit} !important;
    }
    @for $idx from 1 through length($dirstyle) {
      #{$prefix}#{unquote(nth($dirs, $idx))}#{$i}{
        #{$style}-#{unquote(nth($dirstyle, $idx))}: #{$i}#{$unit} !important;
      }
    }
  }

}


@include prefixed-margin-padding();
@include prefixed-margin-padding('padding','.p');

.ma { margin: auto; }
.mra{ margin-right: auto; }
.mla{ margin-left: auto; }
.mta{ margin-top: auto; }
.mba{ margin-bottom: auto; }