OOCSS Spacing, Grid, Type Toolbox https://www.sassmeister.com/gist/090902bae7d6e5604c492b3e604192f8

SassMeister-input-HTML.html

<!-- First row -->
<section class="outer-container">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="outer-container">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="outer-container">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Bourbon (v4.2.6)
// Neat (v1.6.0)
// ----

$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
  (d, 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;
      }
    }
  }
}

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Bourbon (v4.2.6)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

// *********************
// For styling purposes
// *********************
.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}
.bg-accent {
  background: purple;
}
// *********************


// ======================================
// ~Defaults 
// ======================================
* {
  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;

  &:hover {
    cursor: pointer;
  }
}
input[type=text] {
  border: 1px solid #ccc;

  &::-webkit-input-placeholder,
  &::-moz-placeholder,
  &:-ms-input-placeholder,
  &:input-placeholder {
    color: #999;
  }
}
input[type=submit] {
  border: 0;
  display: inline-block;
}
ul, ol, li {
  margin: 0;
  padding: 0;
}
// ======================================
// ~Layout 
$bp-medium: 700px;
$bp-wide: 900px;
$bp-wider: 1000px;
// ======================================
.outer-container {
  @include outer-container;
  padding-left: 1em;
  padding-right: 1em;

  @media (min-width: $max-width) {
    padding-left: 0;
    padding-right: 0;
  }
}

@for $i from 1 through 12 {
  .grid-#{$i} {
    @include media(min-width $bp-medium, 12) {
      @include span-columns($i)
    }
  }
}


.col4 {
  li {
    display: block;
    @media (min-width: $bp-wide) {
      // 2 col
      @include span-columns(6);
    }
    @media (min-width: $bp-wider) {
      // 3 col
      @include span-columns(3);
    }
  }
  // first of 2
  li:nth-child(2n+1) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 2
  li:nth-child(2n) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      @include omega();
    }
  }

  // first of 3
  li:nth-child(4n+1) {
    @media (min-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 4
  li:nth-child(4n) {
    @media (min-width: $bp-wider) {
      @include omega();
    }
  }
}

.col3 {
  li {
    display: block;
    @media (min-width: $bp-wide) {
      // 2 col
      @include span-columns(6);
    }
    @media (min-width: $bp-wider) {
      // 3 col
      @include span-columns(4);
    }
  }
  // first of 2
  li:nth-child(2n+1) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 2
  li:nth-child(2n) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      @include omega();
    }
  }

  // first of 3
  li:nth-child(3n+1) {
    @media (min-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 3
  li:nth-child(3n) {
    @media (min-width: $bp-wider) {
      @include omega();
    }
  }
}

.col2 {
  li {
    @media (min-width: $bp-wider) {
      @include span-columns(6);
      @include omega(2n);
    }
  }
}

// ======================================
// Type
// ======================================
.bold {
  font-weight: bold;
}
.emph {
  font-style: italic;
}
// Minor Third Scale 1.2
.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;
}

// ~Toolbox
.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;
}

// ======================================
// ~Mixins
// ======================================
@mixin contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release.";
  }
  background-color: $background-color;
  color: contrast-color($background-color, $dark, $light);
}

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
  }
  @if $color == null {
    @return null;
  }
  @else {
    $color-brightness: brightness($color);
    $dark-text-brightness: brightness($dark);
    $light-text-brightness: brightness($light);
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
  }
}

@function brightness($color) {
  @if type-of($color) == color {
    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
  }
  @else {
    @return unquote("brightness(#{$color})");
  }
}

@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

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;
}

SassMeister-rendered.html

<!-- First row -->
<section class="outer-container">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="outer-container">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="outer-container">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>