Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$spaces: "m" "margin", "p" "padding";
$directions: "t" "top", "r" "right", "b" "bottom", "l" "left";
$charges: "" "-";
$defPX: 10;

$i: 0;

@while $i < 5 {
  @each $charge in $charges {
    @each $space in $spaces {
      @if not (nth($space, 1) == "p" and ($charge == "-") or (($charge == "-") and ($i == 0))) {
        .#{nth($space, 1)}#{$charge}#{$i} {
          #{nth($space, 2)}: #{$charge}#{$defPX * $i}px;
        }
        @each $direction in $directions {
          .#{nth($space, 1)}#{nth($direction, 1)}#{$charge}#{$i} {
            #{nth($space, 2)}-#{nth($direction, 2)}: #{$charge}#{$defPX * $i}px;
          }
        }
      }
    }
  }
  $i: $i + 1;
}

SassMeister-output.css

.m0 { margin: 0px; }

.mt0 { margin-top: 0px; }

.mr0 { margin-right: 0px; }

.mb0 { margin-bottom: 0px; }

.ml0 { margin-left: 0px; }

.p0 { padding: 0px; }

.pt0 { padding-top: 0px; }

.pr0 { padding-right: 0px; }

.pb0 { padding-bottom: 0px; }

.pl0 { padding-left: 0px; }

.m1 { margin: 10px; }

.mt1 { margin-top: 10px; }

.mr1 { margin-right: 10px; }

.mb1 { margin-bottom: 10px; }

.ml1 { margin-left: 10px; }

.p1 { padding: 10px; }

.pt1 { padding-top: 10px; }

.pr1 { padding-right: 10px; }

.pb1 { padding-bottom: 10px; }

.pl1 { padding-left: 10px; }

.m-1 { margin: -10px; }

.mt-1 { margin-top: -10px; }

.mr-1 { margin-right: -10px; }

.mb-1 { margin-bottom: -10px; }

.ml-1 { margin-left: -10px; }

.m2 { margin: 20px; }

.mt2 { margin-top: 20px; }

.mr2 { margin-right: 20px; }

.mb2 { margin-bottom: 20px; }

.ml2 { margin-left: 20px; }

.p2 { padding: 20px; }

.pt2 { padding-top: 20px; }

.pr2 { padding-right: 20px; }

.pb2 { padding-bottom: 20px; }

.pl2 { padding-left: 20px; }

.m-2 { margin: -20px; }

.mt-2 { margin-top: -20px; }

.mr-2 { margin-right: -20px; }

.mb-2 { margin-bottom: -20px; }

.ml-2 { margin-left: -20px; }

.m3 { margin: 30px; }

.mt3 { margin-top: 30px; }

.mr3 { margin-right: 30px; }

.mb3 { margin-bottom: 30px; }

.ml3 { margin-left: 30px; }

.p3 { padding: 30px; }

.pt3 { padding-top: 30px; }

.pr3 { padding-right: 30px; }

.pb3 { padding-bottom: 30px; }

.pl3 { padding-left: 30px; }

.m-3 { margin: -30px; }

.mt-3 { margin-top: -30px; }

.mr-3 { margin-right: -30px; }

.mb-3 { margin-bottom: -30px; }

.ml-3 { margin-left: -30px; }

.m4 { margin: 40px; }

.mt4 { margin-top: 40px; }

.mr4 { margin-right: 40px; }

.mb4 { margin-bottom: 40px; }

.ml4 { margin-left: 40px; }

.p4 { padding: 40px; }

.pt4 { padding-top: 40px; }

.pr4 { padding-right: 40px; }

.pb4 { padding-bottom: 40px; }

.pl4 { padding-left: 40px; }

.m-4 { margin: -40px; }

.mt-4 { margin-top: -40px; }

.mr-4 { margin-right: -40px; }

.mb-4 { margin-bottom: -40px; }

.ml-4 { margin-left: -40px; }