Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

//  Number of slices of a 100% scale that will be generated
    $steps: 20;

//  Custom widths that will be generated among the proportions
    $customWidths: (
        100:   1,
        3rd:   0.3333333333333333,
        6th:   0.1666666666666667,
        7th:   0.1428571428571429
    );

//  Responsive brekpoints    
    $breakpoints: (
      xxs: 'max-width: 480px',
      xs:  'max-width: 768px',
      sm:  'min-width: 768px',
      md:  'min-width: 992px',
      lg:  'min-width: 1200px'  
    );
    
        @mixin utility($name, $prefix: false) {

        @if ($prefix) {

            %u-#{$prefix}-#{$name} {
                @content;
            }

            .u-#{$prefix}-#{$name} {
                @content;
            }

        } @else {

            %u-#{$name} {
                @content;
            }

            .u-#{$name} {
                @content;
            }            

        }
    }


  @mixin createResponsiveWidths() {

    @each $index, $size in $breakpoints {

      @media (#{$size}) {
          @for $key from 1 to $steps {
              $tmpSize: floor($key / $steps*100);

              @include utility(#{$tmpSize}, $index) {
                  width: percentage($key / $steps) !important;
              }              
          }
          @each $width, $size in $customWidths {
              $tmpSize: $width;

              @include utility(#{$tmpSize}, $index) {
                  width: percentage($size) !important;
              }
          }
          
          @include utility('hidden', $index) {
            display: none;
          }

      }        
    }

  }
  
  @include createResponsiveWidths();    

SassMeister-output.css

@media (max-width: 480px) {
  .u-xxs-5 {
    width: 5% !important;
  }

  .u-xxs-10 {
    width: 10% !important;
  }

  .u-xxs-15 {
    width: 15% !important;
  }

  .u-xxs-20 {
    width: 20% !important;
  }

  .u-xxs-25 {
    width: 25% !important;
  }

  .u-xxs-30 {
    width: 30% !important;
  }

  .u-xxs-35 {
    width: 35% !important;
  }

  .u-xxs-40 {
    width: 40% !important;
  }

  .u-xxs-45 {
    width: 45% !important;
  }

  .u-xxs-50 {
    width: 50% !important;
  }

  .u-xxs-55 {
    width: 55.0% !important;
  }

  .u-xxs-60 {
    width: 60% !important;
  }

  .u-xxs-65 {
    width: 65% !important;
  }

  .u-xxs-70 {
    width: 70% !important;
  }

  .u-xxs-75 {
    width: 75% !important;
  }

  .u-xxs-80 {
    width: 80% !important;
  }

  .u-xxs-85 {
    width: 85% !important;
  }

  .u-xxs-90 {
    width: 90% !important;
  }

  .u-xxs-95 {
    width: 95% !important;
  }

  .u-xxs-100 {
    width: 100% !important;
  }

  .u-xxs-3rd {
    width: 33.33333% !important;
  }

  .u-xxs-6th {
    width: 16.66667% !important;
  }

  .u-xxs-7th {
    width: 14.28571% !important;
  }

  .u-xxs-hidden {
    display: none;
  }
}
@media (max-width: 768px) {
  .u-xs-5 {
    width: 5% !important;
  }

  .u-xs-10 {
    width: 10% !important;
  }

  .u-xs-15 {
    width: 15% !important;
  }

  .u-xs-20 {
    width: 20% !important;
  }

  .u-xs-25 {
    width: 25% !important;
  }

  .u-xs-30 {
    width: 30% !important;
  }

  .u-xs-35 {
    width: 35% !important;
  }

  .u-xs-40 {
    width: 40% !important;
  }

  .u-xs-45 {
    width: 45% !important;
  }

  .u-xs-50 {
    width: 50% !important;
  }

  .u-xs-55 {
    width: 55.0% !important;
  }

  .u-xs-60 {
    width: 60% !important;
  }

  .u-xs-65 {
    width: 65% !important;
  }

  .u-xs-70 {
    width: 70% !important;
  }

  .u-xs-75 {
    width: 75% !important;
  }

  .u-xs-80 {
    width: 80% !important;
  }

  .u-xs-85 {
    width: 85% !important;
  }

  .u-xs-90 {
    width: 90% !important;
  }

  .u-xs-95 {
    width: 95% !important;
  }

  .u-xs-100 {
    width: 100% !important;
  }

  .u-xs-3rd {
    width: 33.33333% !important;
  }

  .u-xs-6th {
    width: 16.66667% !important;
  }

  .u-xs-7th {
    width: 14.28571% !important;
  }

  .u-xs-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .u-sm-5 {
    width: 5% !important;
  }

  .u-sm-10 {
    width: 10% !important;
  }

  .u-sm-15 {
    width: 15% !important;
  }

  .u-sm-20 {
    width: 20% !important;
  }

  .u-sm-25 {
    width: 25% !important;
  }

  .u-sm-30 {
    width: 30% !important;
  }

  .u-sm-35 {
    width: 35% !important;
  }

  .u-sm-40 {
    width: 40% !important;
  }

  .u-sm-45 {
    width: 45% !important;
  }

  .u-sm-50 {
    width: 50% !important;
  }

  .u-sm-55 {
    width: 55.0% !important;
  }

  .u-sm-60 {
    width: 60% !important;
  }

  .u-sm-65 {
    width: 65% !important;
  }

  .u-sm-70 {
    width: 70% !important;
  }

  .u-sm-75 {
    width: 75% !important;
  }

  .u-sm-80 {
    width: 80% !important;
  }

  .u-sm-85 {
    width: 85% !important;
  }

  .u-sm-90 {
    width: 90% !important;
  }

  .u-sm-95 {
    width: 95% !important;
  }

  .u-sm-100 {
    width: 100% !important;
  }

  .u-sm-3rd {
    width: 33.33333% !important;
  }

  .u-sm-6th {
    width: 16.66667% !important;
  }

  .u-sm-7th {
    width: 14.28571% !important;
  }

  .u-sm-hidden {
    display: none;
  }
}
@media (min-width: 992px) {
  .u-md-5 {
    width: 5% !important;
  }

  .u-md-10 {
    width: 10% !important;
  }

  .u-md-15 {
    width: 15% !important;
  }

  .u-md-20 {
    width: 20% !important;
  }

  .u-md-25 {
    width: 25% !important;
  }

  .u-md-30 {
    width: 30% !important;
  }

  .u-md-35 {
    width: 35% !important;
  }

  .u-md-40 {
    width: 40% !important;
  }

  .u-md-45 {
    width: 45% !important;
  }

  .u-md-50 {
    width: 50% !important;
  }

  .u-md-55 {
    width: 55.0% !important;
  }

  .u-md-60 {
    width: 60% !important;
  }

  .u-md-65 {
    width: 65% !important;
  }

  .u-md-70 {
    width: 70% !important;
  }

  .u-md-75 {
    width: 75% !important;
  }

  .u-md-80 {
    width: 80% !important;
  }

  .u-md-85 {
    width: 85% !important;
  }

  .u-md-90 {
    width: 90% !important;
  }

  .u-md-95 {
    width: 95% !important;
  }

  .u-md-100 {
    width: 100% !important;
  }

  .u-md-3rd {
    width: 33.33333% !important;
  }

  .u-md-6th {
    width: 16.66667% !important;
  }

  .u-md-7th {
    width: 14.28571% !important;
  }

  .u-md-hidden {
    display: none;
  }
}
@media (min-width: 1200px) {
  .u-lg-5 {
    width: 5% !important;
  }

  .u-lg-10 {
    width: 10% !important;
  }

  .u-lg-15 {
    width: 15% !important;
  }

  .u-lg-20 {
    width: 20% !important;
  }

  .u-lg-25 {
    width: 25% !important;
  }

  .u-lg-30 {
    width: 30% !important;
  }

  .u-lg-35 {
    width: 35% !important;
  }

  .u-lg-40 {
    width: 40% !important;
  }

  .u-lg-45 {
    width: 45% !important;
  }

  .u-lg-50 {
    width: 50% !important;
  }

  .u-lg-55 {
    width: 55.0% !important;
  }

  .u-lg-60 {
    width: 60% !important;
  }

  .u-lg-65 {
    width: 65% !important;
  }

  .u-lg-70 {
    width: 70% !important;
  }

  .u-lg-75 {
    width: 75% !important;
  }

  .u-lg-80 {
    width: 80% !important;
  }

  .u-lg-85 {
    width: 85% !important;
  }

  .u-lg-90 {
    width: 90% !important;
  }

  .u-lg-95 {
    width: 95% !important;
  }

  .u-lg-100 {
    width: 100% !important;
  }

  .u-lg-3rd {
    width: 33.33333% !important;
  }

  .u-lg-6th {
    width: 16.66667% !important;
  }

  .u-lg-7th {
    width: 14.28571% !important;
  }

  .u-lg-hidden {
    display: none;
  }
}