Sass Maps for OOCSS spacing and borders

SassMeister-input.scss

$color-border-soft: #ccc;

// padding and margin
$space_sizes:
  (l, 2em),    //large
  (m, 1.5em),  //medium
  (d, 1em),  //default
  (s, 0.5em),  //small
  (xs, 0.25em) //x-small
;
$orientation_list: (
  v,
  h
);
$direction_list: (
  (t, top),
  (r, right),
  (b, bottom),
  (l, left)
);

@each $space_sizes, $size in $space_sizes {
  .pa#{$space_sizes} {
    padding: $size;
  }
  .ma#{$space_sizes} {
    margin: $size;
  }
}
@each $direction_list, $direction in $direction_list {
  @each $space_sizes, $size in $space_sizes {
    .p#{$direction_list}#{$space_sizes} {
      padding-#{$direction}: $size;
    }
    .m#{$direction_list}#{$space_sizes} {
      margin-#{$direction}: $size;
    }
  }
}
@each $orientation_list, $orientation in $orientation_list {
  @each $space_sizes, $size in $space_sizes {
    @if $orientation_list == "v" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-bottom: $size;
        padding-top: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-bottom: $size;
        margin-top: $size;
      }
    }
    @else if $orientation_list == "h" {
      .p#{$orientation_list}#{$space_sizes} {
        padding-left: $size;
        padding-right: $size;
      }
      .m#{$orientation_list}#{$space_sizes} {
        margin-left: $size;
        margin-right: $size;
      }
    }
  }
}

// border
$border_sizes:
  (l, 5px), //large
  (m, 2px), //medium
  (n, 1px)  //normal
;

@each $border_sizes, $size in $border_sizes {
  .ba#{$border_sizes} {
    border: $size solid $color-border-soft;
  }
}
@each $direction_list, $direction in $direction_list {
  @each $border_sizes, $width in $border_sizes {
    @if $border_sizes != "" {
      .b#{$direction_list}#{$border_sizes} {
        border-#{$direction}: $width solid $color-border-soft;
      }
    }
    @else  {
      .b#{$direction_list} {
        border-#{$direction}: $width solid $color-border-soft;
      }
    }
  }
}
@each $orientation_list, $orientation in $orientation_list {
  @each $border_sizes, $size in $border_sizes {
    $hyphen: '';
    @if $space_sizes != ''{
      $hyphen: '-';
    }
    @if $orientation_list == "v" {
      .b#{$orientation_list}#{$border_sizes} {
        border-bottom: $size;
        border-top: $size;
      }
    }
    @else if $orientation_list == "h" {
      .b#{$orientation_list}#{$border_sizes} {
        border-left: $size;
        border-right: $size;
      }
    }
  }
}

SassMeister-output.css

.pal {
  padding: 2em;
}

.mal {
  margin: 2em;
}

.pam {
  padding: 1.5em;
}

.mam {
  margin: 1.5em;
}

.pad {
  padding: 1em;
}

.mad {
  margin: 1em;
}

.pas {
  padding: 0.5em;
}

.mas {
  margin: 0.5em;
}

.paxs {
  padding: 0.25em;
}

.maxs {
  margin: 0.25em;
}

.ptl {
  padding-top: 2em;
}

.mtl {
  margin-top: 2em;
}

.ptm {
  padding-top: 1.5em;
}

.mtm {
  margin-top: 1.5em;
}

.ptd {
  padding-top: 1em;
}

.mtd {
  margin-top: 1em;
}

.pts {
  padding-top: 0.5em;
}

.mts {
  margin-top: 0.5em;
}

.ptxs {
  padding-top: 0.25em;
}

.mtxs {
  margin-top: 0.25em;
}

.prl {
  padding-right: 2em;
}

.mrl {
  margin-right: 2em;
}

.prm {
  padding-right: 1.5em;
}

.mrm {
  margin-right: 1.5em;
}

.prd {
  padding-right: 1em;
}

.mrd {
  margin-right: 1em;
}

.prs {
  padding-right: 0.5em;
}

.mrs {
  margin-right: 0.5em;
}

.prxs {
  padding-right: 0.25em;
}

.mrxs {
  margin-right: 0.25em;
}

.pbl {
  padding-bottom: 2em;
}

.mbl {
  margin-bottom: 2em;
}

.pbm {
  padding-bottom: 1.5em;
}

.mbm {
  margin-bottom: 1.5em;
}

.pbd {
  padding-bottom: 1em;
}

.mbd {
  margin-bottom: 1em;
}

.pbs {
  padding-bottom: 0.5em;
}

.mbs {
  margin-bottom: 0.5em;
}

.pbxs {
  padding-bottom: 0.25em;
}

.mbxs {
  margin-bottom: 0.25em;
}

.pll {
  padding-left: 2em;
}

.mll {
  margin-left: 2em;
}

.plm {
  padding-left: 1.5em;
}

.mlm {
  margin-left: 1.5em;
}

.pld {
  padding-left: 1em;
}

.mld {
  margin-left: 1em;
}

.pls {
  padding-left: 0.5em;
}

.mls {
  margin-left: 0.5em;
}

.plxs {
  padding-left: 0.25em;
}

.mlxs {
  margin-left: 0.25em;
}

.pvl {
  padding-bottom: 2em;
  padding-top: 2em;
}

.mvl {
  margin-bottom: 2em;
  margin-top: 2em;
}

.pvm {
  padding-bottom: 1.5em;
  padding-top: 1.5em;
}

.mvm {
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}

.pvd {
  padding-bottom: 1em;
  padding-top: 1em;
}

.mvd {
  margin-bottom: 1em;
  margin-top: 1em;
}

.pvs {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.mvs {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

.pvxs {
  padding-bottom: 0.25em;
  padding-top: 0.25em;
}

.mvxs {
  margin-bottom: 0.25em;
  margin-top: 0.25em;
}

.phl {
  padding-left: 2em;
  padding-right: 2em;
}

.mhl {
  margin-left: 2em;
  margin-right: 2em;
}

.phm {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.mhm {
  margin-left: 1.5em;
  margin-right: 1.5em;
}

.phd {
  padding-left: 1em;
  padding-right: 1em;
}

.mhd {
  margin-left: 1em;
  margin-right: 1em;
}

.phs {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.mhs {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.phxs {
  padding-left: 0.25em;
  padding-right: 0.25em;
}

.mhxs {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.bal {
  border: 5px solid #ccc;
}

.bam {
  border: 2px solid #ccc;
}

.ban {
  border: 1px solid #ccc;
}

.btl {
  border-top: 5px solid #ccc;
}

.btm {
  border-top: 2px solid #ccc;
}

.btn {
  border-top: 1px solid #ccc;
}

.brl {
  border-right: 5px solid #ccc;
}

.brm {
  border-right: 2px solid #ccc;
}

.brn {
  border-right: 1px solid #ccc;
}

.bbl {
  border-bottom: 5px solid #ccc;
}

.bbm {
  border-bottom: 2px solid #ccc;
}

.bbn {
  border-bottom: 1px solid #ccc;
}

.bll {
  border-left: 5px solid #ccc;
}

.blm {
  border-left: 2px solid #ccc;
}

.bln {
  border-left: 1px solid #ccc;
}

.bvl {
  border-bottom: 5px;
  border-top: 5px;
}

.bvm {
  border-bottom: 2px;
  border-top: 2px;
}

.bvn {
  border-bottom: 1px;
  border-top: 1px;
}

.bhl {
  border-left: 5px;
  border-right: 5px;
}

.bhm {
  border-left: 2px;
  border-right: 2px;
}

.bhn {
  border-left: 1px;
  border-right: 1px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}

.bg-accent {
  background: purple;
}

* {
  box-sizing: border-box;
  outline: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 93.75%;
}

body {
  background: #fff;
  color: #333;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
  padding: 0;
}

h1, h2 {
  line-height: 1.1;
}

a {
  transition: all 0.1s;
  color: blue;
  text-decoration: none;
  cursor: pointer;
}

p {
  margin: 0;
}

form {
  margin: 0;
}

input {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1em;
}
input:hover {
  cursor: pointer;
}

input[type=text] {
  border: 1px solid #ccc;
}
input[type=text]::-webkit-input-placeholder, input[type=text]::-moz-placeholder, input[type=text]:-ms-input-placeholder, input[type=text]:input-placeholder {
  color: #999;
}

input[type=submit] {
  border: 0;
  display: inline-block;
}

ul, ol, li {
  margin: 0;
  padding: 0;
}

.outer-container {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
}
.outer-container:before, .outer-container:after {
  content: " ";
  display: table;
}
.outer-container:after {
  clear: both;
}
@media (min-width: 68em) {
  .outer-container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .grid-1:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .grid-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .grid-3:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .grid-4:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .grid-5:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .grid-6:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .grid-7:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .grid-8:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .grid-9:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .grid-10:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .grid-11:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .grid-12:last-child {
    margin-right: 0;
  }
}

.col4 li {
  display: block;
}
@media (min-width: 900px) {
  .col4 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .col4 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col4 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .col4 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col4 li:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col4 li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col4 li:nth-child(4n+1) {
    clear: left;
  }
}
@media (min-width: 1000px) {
  .col4 li:nth-child(4n) {
    margin-right: 0;
  }
}

.col3 li {
  display: block;
}
@media (min-width: 900px) {
  .col3 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .col3 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col3 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .col3 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col3 li:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col3 li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col3 li:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 1000px) {
  .col3 li:nth-child(3n) {
    margin-right: 0;
  }
}

@media (min-width: 1000px) {
  .col2 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .col2 li:last-child {
    margin-right: 0;
  }
  .col2 li:nth-child(2n) {
    margin-right: 0;
  }
  .col2 li:nth-child(2n+1) {
    clear: left;
  }
}

.bold {
  font-weight: bold;
}

.emph {
  font-style: italic;
}

.hxl {
  font-size: 2.488rem;
}

.h1 {
  font-size: 2.074rem;
}

.h2 {
  font-size: 1.728rem;
}

.h3 {
  font-size: 1.44rem;
}

.h4 {
  font-size: 1.2rem;
}

.h {
  font-size: 1rem;
}

.hxs {
  font-size: 0.833rem;
}

.hxxs {
  font-size: 0.7rem;
}

.hide {
  display: none;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clear {
  clear: both;
}

.center {
  margin: 0 auto;
}

.left {
  float: left;
}

.right {
  float: right;
}

.upper {
  text-transform: uppercase;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}