Generated by SassMeister.com.

SassMeister-input.scss

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

// ==========================================================================
// Size overrides
// ==========================================================================

//
// A mixin and set of classes for changing the width of an element.
// Use the classes for changing an element width in html, or the
// mixin to change in css at different breakpoints.
///

//
// Available variables
///
$size-mixin-step-value: 1;
$size-class-step-value: 5;
$size-class-range-start: 5;
$size-class-range-end: 100;

//
// Size mixin
///
@mixin size($size, $modulo: $size-mixin-step-value) {
    @if $size % $modulo == 0 {
        width: unquote('#{$size}%') !important;
    }
}

//
// Size classes
//
// This will generate a list of classes in the format `.size-[percent]`.
// By default it will generate a class for every 5% step from 5 to 100.
///
@for $size from $size-class-range-start through $size-class-range-end {
    .size-#{$size} { @include size($size, $size-class-step-value) }
}

SassMeister-output.css

.size-5 {
  width: 5% !important;
}

.size-10 {
  width: 10% !important;
}

.size-15 {
  width: 15% !important;
}

.size-20 {
  width: 20% !important;
}

.size-25 {
  width: 25% !important;
}

.size-30 {
  width: 30% !important;
}

.size-35 {
  width: 35% !important;
}

.size-40 {
  width: 40% !important;
}

.size-45 {
  width: 45% !important;
}

.size-50 {
  width: 50% !important;
}

.size-55 {
  width: 55% !important;
}

.size-60 {
  width: 60% !important;
}

.size-65 {
  width: 65% !important;
}

.size-70 {
  width: 70% !important;
}

.size-75 {
  width: 75% !important;
}

.size-80 {
  width: 80% !important;
}

.size-85 {
  width: 85% !important;
}

.size-90 {
  width: 90% !important;
}

.size-95 {
  width: 95% !important;
}

.size-100 {
  width: 100% !important;
}