Spacer Helper Classes using Sass Maps

spacer-maps.css

.ptn {
  padding-top: 0px !important;
}

.prn {
  padding-right: 0px !important;
}

.pbn {
  padding-bottom: 0px !important;
}

.pln {
  padding-left: 0px !important;
}

.pts {
  padding-top: 5px !important;
}

.prs {
  padding-right: 5px !important;
}

.pbs {
  padding-bottom: 5px !important;
}

.pls {
  padding-left: 5px !important;
}

.ptm {
  padding-top: 10px !important;
}

.prm {
  padding-right: 10px !important;
}

.pbm {
  padding-bottom: 10px !important;
}

.plm {
  padding-left: 10px !important;
}

.ptl {
  padding-top: 20px !important;
}

.prl {
  padding-right: 20px !important;
}

.pbl {
  padding-bottom: 20px !important;
}

.pll {
  padding-left: 20px !important;
}

.mtn {
  margin-top: 0px !important;
}

.mrn {
  margin-right: 0px !important;
}

.mbn {
  margin-bottom: 0px !important;
}

.mln {
  margin-left: 0px !important;
}

.mts {
  margin-top: 5px !important;
}

.mrs {
  margin-right: 5px !important;
}

.mbs {
  margin-bottom: 5px !important;
}

.mls {
  margin-left: 5px !important;
}

.mtm {
  margin-top: 10px !important;
}

.mrm {
  margin-right: 10px !important;
}

.mbm {
  margin-bottom: 10px !important;
}

.mlm {
  margin-left: 10px !important;
}

.mtl {
  margin-top: 20px !important;
}

.mrl {
  margin-right: 20px !important;
}

.mbl {
  margin-bottom: 20px !important;
}

.mll {
  margin-left: 20px !important;
}

spacer-maps.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

@each $spacer, $orientation, $size, $amount in (p, t, n, 0px),
                                                (p, r, n, 0px),
                                                (p, b, n, 0px),
                                                (p, l, n, 0px),
                                                (p, t, s, 5px),
                                                (p, r, s, 5px),
                                                (p, b, s, 5px),
                                                (p, l, s, 5px),
                                                (p, t, m, 10px),
                                                (p, r, m, 10px),
                                                (p, b, m, 10px),
                                                (p, l, m, 10px),
                                                (p, t, l, 20px),
                                                (p, r, l, 20px),
                                                (p, b, l, 20px),
                                                (p, l, l, 20px),
                                                (m, t, n, 0px),
                                                (m, r, n, 0px),
                                                (m, b, n, 0px),
                                                (m, l, n, 0px),
                                                (m, t, s, 5px),
                                                (m, r, s, 5px),
                                                (m, b, s, 5px),
                                                (m, l, s, 5px),
                                                (m, t, m, 10px),
                                                (m, r, m, 10px),
                                                (m, b, m, 10px),
                                                (m, l, m, 10px),
                                                (m, t, l, 20px),
                                                (m, r, l, 20px),
                                                (m, b, l, 20px),
                                                (m, l, l, 20px)
  {
  @if $spacer == "p"{
    @if $orientation == "t" {
      .#{$spacer}#{$orientation}#{$size}{
        padding-top: $amount !important;
      }
    }
    @if $orientation == "r" {
      .#{$spacer}#{$orientation}#{$size}{
        padding-right: $amount !important;
      }
    }
    @if $orientation == "b" {
      .#{$spacer}#{$orientation}#{$size}{
        padding-bottom: $amount !important;
      }
    }
    @if $orientation == "l" {
      .#{$spacer}#{$orientation}#{$size}{
        padding-left: $amount !important;
      }
    }
  }
  @if $spacer == "m"{
    @if $orientation == "t" {
      .#{$spacer}#{$orientation}#{$size}{
        margin-top: $amount !important;
      }
    }
    @if $orientation == "r" {
      .#{$spacer}#{$orientation}#{$size}{
        margin-right: $amount !important;
      }
    }
    @if $orientation == "b" {
      .#{$spacer}#{$orientation}#{$size}{
        margin-bottom: $amount !important;
      }
    }
    @if $orientation == "l" {
      .#{$spacer}#{$orientation}#{$size}{
        margin-left: $amount !important;
      }
    }
  }
}