Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box box--blue u-padding-A--12">
  <p class="u-text--16">Hello World</p>
</div>

<div class="box box--red u-padding-V--8">
  <p class="u-text--10">Hello World</p>
</div>

SassMeister-input.scss

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

$small6: 6;
$small7: 7;
$small8: 8;
$small9: 9;

$medium: 10;
$medium1: 11;
$medium2: 12;
$medium3: 13;
$medium4: 14;
$medium5: 15;
$medium6: 16;
$medium7: 17;
$medium8: 18;
$medium9: 19;

$large: 20;
$large1: 21;
$large2: 22;
$large3: 23;
$large4: 24;
$large5: 25;
$large6: 26;
$large7: 27;
$large8: 28;
$large9: 29;

$extraLarge: 30;
$extraLarge1: 31;
$extraLarge2: 32;

$sizing:  s6 $small6, 
          s7 $small7, 
          s8 $small8,
          s9 $small9,
          m $medium,
          m1 $medium1,
          m2 $medium2,
          m3 $medium3,
          m4 $medium4,
          m5 $medium5,
          m6 $medium6,
          m7 $medium7,
          m8 $medium8,
          m9 $medium9,
          l $large,
          l1 $large1,
          l2 $large2,
          l3 $large3,
          l4 $large4,
          l5 $large5,
          l6 $large6,
          l7 $large7,
          l8 $large8,
          l9 $large9,
          xl $extraLarge,
          xl1 $extraLarge1,
          xl2 $extraLarge2;

/* Calculate rem values from base font size */
@function calculateRem($size, $baseValue: 14) {
  $remSize: $size / $baseValue;
  @return #{$remSize}rem;
}

/* Fonts */
@for $size from 6 through 32 {
  
    %u-text--#{$size} {
    font-size: #{$size}px !important;
  }
  
  %u-text-base--#{$size} {
    font-size: calculateRem($size) !important;
  }
  
}


/* Padding */
@for $size from 6 through 20 {
  
  %u-padding-V--#{$size} {
    padding-top: #{$size}px !important; padding-bottom: #{$size}px !important;
  }
  
  %u-padding-H--#{$size} {
    padding-left: #{$size}px !important; padding-right: #{$size}px !important;
  }
  
  %u-padding-T--#{$size} {
    padding-top: #{$size}px !important;
  }
  
  %u-padding-B--#{$size} {
    padding-bottom: #{$size}px !important;
  }
  
  %u-padding-L--#{$size} {
    padding-left: #{$size}px !important;
  }
  
  %u-padding-R--#{$size} {
    padding-right: #{$size}px !important;
  }
  
  %u-padding-A--#{$size} {
    padding: #{$size}px !important;
  }
  
}

/* Only create classes that are currently needed */

.u-text--10 { @extend %u-text--10; }
.u-text--12 { @extend %u-text--12; }
.u-text--14 { @extend %u-text--14; }
.u-text--16 { @extend %u-text--16; }

.u-text-base--10 { @extend %u-text-base--10; }
.u-text-base--12 { @extend %u-text-base--12; }
.u-text-base--14 { @extend %u-text-base--14; }
.u-text-base--16 { @extend %u-text-base--16; }

.u-padding-V--8 { @extend %u-padding-V--8; }
.u-padding-A--12 { @extend %u-padding-A--12; }








/* For Testing Only :) */
.box {
  width:100px;
  text-align:center;
  margin:10px;
}

.box--blue {
  color:#fff;
  background-color: #50a5e6;
}

.box--red {
  color:#fff;
  background-color: #dd2e44;
}

SassMeister-output.css

/* Calculate rem values from base font size */
/* Fonts */
.u-text--10 {
  font-size: 10px !important;
}

.u-text-base--10 {
  font-size: 0.71429rem !important;
}

.u-text--12 {
  font-size: 12px !important;
}

.u-text-base--12 {
  font-size: 0.85714rem !important;
}

.u-text--14 {
  font-size: 14px !important;
}

.u-text-base--14 {
  font-size: 1rem !important;
}

.u-text--16 {
  font-size: 16px !important;
}

.u-text-base--16 {
  font-size: 1.14286rem !important;
}

/* Padding */
.u-padding-V--8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.u-padding-A--12 {
  padding: 12px !important;
}

/* Only create classes that are currently needed */
/* For Testing Only :) */
.box {
  width: 100px;
  text-align: center;
  margin: 10px;
}

.box--blue {
  color: #fff;
  background-color: #50a5e6;
}

.box--red {
  color: #fff;
  background-color: #dd2e44;
}

SassMeister-rendered.html

<div class="box box--blue u-padding-A--12">
  <p class="u-text--16">Hello World</p>
</div>

<div class="box box--red u-padding-V--8">
  <p class="u-text--10">Hello World</p>
</div>