Generated by SassMeister.com.

SassMeister-input-HTML.html

<div style="width: 2pc; height: 2pc; background: red;"></div>
<div style="width: 32px; height: 32px; background: red;"></div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

SassMeister-output.css

/*------------------------------------*  #LAYOUT
\*------------------------------------*/
.o-layout {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: -24px;
}

.o-layout__item {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding-left: 24px;
}

/*------------------------------------*    #WIDTHS
\*------------------------------------*/
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
 * word format (e.g. `.u-2-of-3`). Use these in your markup:
 *
 * <div class="u-7/12">
 */
.u-1\/1 {
  width: 100% !important;
}

.u-1\/2 {
  width: 50% !important;
}

.u-2\/2 {
  width: 100% !important;
}

.u-1\/3 {
  width: 33.33333% !important;
}

.u-2\/3 {
  width: 66.66667% !important;
}

.u-3\/3 {
  width: 100% !important;
}

.u-1\/4 {
  width: 25% !important;
}

.u-2\/4 {
  width: 50% !important;
}

.u-3\/4 {
  width: 75% !important;
}

.u-4\/4 {
  width: 100% !important;
}

.u-1\/5 {
  width: 20% !important;
}

.u-2\/5 {
  width: 40% !important;
}

.u-3\/5 {
  width: 60% !important;
}

.u-4\/5 {
  width: 80% !important;
}

.u-5\/5 {
  width: 100% !important;
}

@media screen and (min-width: 720px) {
  .u-1\/1\@sm {
    width: 100% !important;
  }
  .u-1\/2\@sm {
    width: 50% !important;
  }
  .u-2\/2\@sm {
    width: 100% !important;
  }
  .u-1\/3\@sm {
    width: 33.33333% !important;
  }
  .u-2\/3\@sm {
    width: 66.66667% !important;
  }
  .u-3\/3\@sm {
    width: 100% !important;
  }
  .u-1\/4\@sm {
    width: 25% !important;
  }
  .u-2\/4\@sm {
    width: 50% !important;
  }
  .u-3\/4\@sm {
    width: 75% !important;
  }
  .u-4\/4\@sm {
    width: 100% !important;
  }
  .u-1\/5\@sm {
    width: 20% !important;
  }
  .u-2\/5\@sm {
    width: 40% !important;
  }
  .u-3\/5\@sm {
    width: 60% !important;
  }
  .u-4\/5\@sm {
    width: 80% !important;
  }
  .u-5\/5\@sm {
    width: 100% !important;
  }
}

@media screen and (min-width: 1024px) {
  .u-1\/1\@md {
    width: 100% !important;
  }
  .u-1\/2\@md {
    width: 50% !important;
  }
  .u-2\/2\@md {
    width: 100% !important;
  }
  .u-1\/3\@md {
    width: 33.33333% !important;
  }
  .u-2\/3\@md {
    width: 66.66667% !important;
  }
  .u-3\/3\@md {
    width: 100% !important;
  }
  .u-1\/4\@md {
    width: 25% !important;
  }
  .u-2\/4\@md {
    width: 50% !important;
  }
  .u-3\/4\@md {
    width: 75% !important;
  }
  .u-4\/4\@md {
    width: 100% !important;
  }
  .u-1\/5\@md {
    width: 20% !important;
  }
  .u-2\/5\@md {
    width: 40% !important;
  }
  .u-3\/5\@md {
    width: 60% !important;
  }
  .u-4\/5\@md {
    width: 80% !important;
  }
  .u-5\/5\@md {
    width: 100% !important;
  }
}

@media screen and (min-width: 1200px) {
  .u-1\/1\@lg {
    width: 100% !important;
  }
  .u-1\/2\@lg {
    width: 50% !important;
  }
  .u-2\/2\@lg {
    width: 100% !important;
  }
  .u-1\/3\@lg {
    width: 33.33333% !important;
  }
  .u-2\/3\@lg {
    width: 66.66667% !important;
  }
  .u-3\/3\@lg {
    width: 100% !important;
  }
  .u-1\/4\@lg {
    width: 25% !important;
  }
  .u-2\/4\@lg {
    width: 50% !important;
  }
  .u-3\/4\@lg {
    width: 75% !important;
  }
  .u-4\/4\@lg {
    width: 100% !important;
  }
  .u-1\/5\@lg {
    width: 20% !important;
  }
  .u-2\/5\@lg {
    width: 40% !important;
  }
  .u-3\/5\@lg {
    width: 60% !important;
  }
  .u-4\/5\@lg {
    width: 80% !important;
  }
  .u-5\/5\@lg {
    width: 100% !important;
  }
}

SassMeister-rendered.html

<div style="width: 2pc; height: 2pc; background: red;"></div>
<div style="width: 32px; height: 32px; background: red;"></div>