Generated by SassMeister.com.

SassMeister-input.scss

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

$gel-total-columns: 12 !default;

// Returns a percentage value for the required number of columns
//
// @param {Number}  $span - number of columns required to span
// @param {Number}  $columns ($gel-total-columns) - total number of columns available
//
@function gel-columns($span, $columns: $gel-total-columns) {
  // if decimal passed lets throw a warning
  @if $span < 1 {
    @warn 'Using decimal values ain\'t good - try to use whole numbers';
  }
  
  @if $span >= 1 {
		// Convert the given span to a fraction of the columns
		@return percentage($span / $columns);
	} @else {
		// A fraction has been supplied so lets just
		// converting it to a percentage
		@return percentage($span);
	}
}

// Get a width for a specific number of columns
//
// @param {Number}  $span - number of columns required to span
// @param {Number}  $columns ($gel-total-columns) - total number of columns available
//
@mixin gel-span-columns($span, $columns: $gel-total-columns) {
  width: gel-columns($span, $columns);
}

//
// !This probably should live as part of gel-grid
//
@mixin gel-push-columns($span, $columns: $gel-total-columns) {
  position: relative;
  left: gel-columns($span, $columns);
  right: auto;
}

//
// !This probably should live as part of gel-grid
//
@mixin gel-pull-columns($span, $columns: $gel-total-columns) {
  position: relative;
  left: auto;
  right: gel-columns($span, $columns);
}

.box {
  width: gel-columns(4);
  width: gel-columns(10);
  width: gel-columns(1, 24);
  width: gel-columns(1/24);
  width: gel-columns(0.25);
  padding-left: gel-columns(1);
  margin-left: gel-columns(1, 24);
}

.box--mixin {
  @include gel-span-columns(4);
  @include gel-span-columns(10);
  @include gel-span-columns(1, 24);
  @include gel-span-columns(1/24);
  @include gel-span-columns(0.25);
}

.box--push {
  @include gel-span-columns(4);
  @include gel-push-columns(1);
}

.box--pull {
  @include gel-span-columns(6);
  @include gel-pull-columns(2);
}






@mixin gel-widths($columns, $breakpoint: null) {
  @each $column in $columns {
    @if $column == 1 {
      // no point outputting 100% several times so lets just do it once
      .gel-1\/#{$column} {
        width: 100%;
      }
    } @else {
      // build some layout classes
      @for $i from 1 to $column {
        .gel-#{$i}\/#{$column} {
          width: gel-columns($i / $column) !important;
        }
      }
    }
    
  }
}

@include gel-widths(1 2 3 4 5 6 7 8 9 10 11 12, gel-bp-s);

SassMeister-output.css

.box {
  width: 33.3333333333%;
  width: 83.3333333333%;
  width: 4.1666666667%;
  width: 4.1666666667%;
  width: 25%;
  padding-left: 8.3333333333%;
  margin-left: 4.1666666667%;
}

.box--mixin {
  width: 33.3333333333%;
  width: 83.3333333333%;
  width: 4.1666666667%;
  width: 4.1666666667%;
  width: 25%;
}

.box--push {
  width: 33.3333333333%;
  position: relative;
  left: 8.3333333333%;
  right: auto;
}

.box--pull {
  width: 50%;
  position: relative;
  left: auto;
  right: 16.6666666667%;
}

.gel-1\/1 {
  width: 100%;
}

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

.gel-1\/3 {
  width: 33.3333333333% !important;
}

.gel-2\/3 {
  width: 66.6666666667% !important;
}

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

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

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

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

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

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

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

.gel-1\/6 {
  width: 16.6666666667% !important;
}

.gel-2\/6 {
  width: 33.3333333333% !important;
}

.gel-3\/6 {
  width: 50% !important;
}

.gel-4\/6 {
  width: 66.6666666667% !important;
}

.gel-5\/6 {
  width: 83.3333333333% !important;
}

.gel-1\/7 {
  width: 14.2857142857% !important;
}

.gel-2\/7 {
  width: 28.5714285714% !important;
}

.gel-3\/7 {
  width: 42.8571428571% !important;
}

.gel-4\/7 {
  width: 57.1428571429% !important;
}

.gel-5\/7 {
  width: 71.4285714286% !important;
}

.gel-6\/7 {
  width: 85.7142857143% !important;
}

.gel-1\/8 {
  width: 12.5% !important;
}

.gel-2\/8 {
  width: 25% !important;
}

.gel-3\/8 {
  width: 37.5% !important;
}

.gel-4\/8 {
  width: 50% !important;
}

.gel-5\/8 {
  width: 62.5% !important;
}

.gel-6\/8 {
  width: 75% !important;
}

.gel-7\/8 {
  width: 87.5% !important;
}

.gel-1\/9 {
  width: 11.1111111111% !important;
}

.gel-2\/9 {
  width: 22.2222222222% !important;
}

.gel-3\/9 {
  width: 33.3333333333% !important;
}

.gel-4\/9 {
  width: 44.4444444444% !important;
}

.gel-5\/9 {
  width: 55.5555555556% !important;
}

.gel-6\/9 {
  width: 66.6666666667% !important;
}

.gel-7\/9 {
  width: 77.7777777778% !important;
}

.gel-8\/9 {
  width: 88.8888888889% !important;
}

.gel-1\/10 {
  width: 10% !important;
}

.gel-2\/10 {
  width: 20% !important;
}

.gel-3\/10 {
  width: 30% !important;
}

.gel-4\/10 {
  width: 40% !important;
}

.gel-5\/10 {
  width: 50% !important;
}

.gel-6\/10 {
  width: 60% !important;
}

.gel-7\/10 {
  width: 70% !important;
}

.gel-8\/10 {
  width: 80% !important;
}

.gel-9\/10 {
  width: 90% !important;
}

.gel-1\/11 {
  width: 9.0909090909% !important;
}

.gel-2\/11 {
  width: 18.1818181818% !important;
}

.gel-3\/11 {
  width: 27.2727272727% !important;
}

.gel-4\/11 {
  width: 36.3636363636% !important;
}

.gel-5\/11 {
  width: 45.4545454545% !important;
}

.gel-6\/11 {
  width: 54.5454545455% !important;
}

.gel-7\/11 {
  width: 63.6363636364% !important;
}

.gel-8\/11 {
  width: 72.7272727273% !important;
}

.gel-9\/11 {
  width: 81.8181818182% !important;
}

.gel-10\/11 {
  width: 90.9090909091% !important;
}

.gel-1\/12 {
  width: 8.3333333333% !important;
}

.gel-2\/12 {
  width: 16.6666666667% !important;
}

.gel-3\/12 {
  width: 25% !important;
}

.gel-4\/12 {
  width: 33.3333333333% !important;
}

.gel-5\/12 {
  width: 41.6666666667% !important;
}

.gel-6\/12 {
  width: 50% !important;
}

.gel-7\/12 {
  width: 58.3333333333% !important;
}

.gel-8\/12 {
  width: 66.6666666667% !important;
}

.gel-9\/12 {
  width: 75% !important;
}

.gel-10\/12 {
  width: 83.3333333333% !important;
}

.gel-11\/12 {
  width: 91.6666666667% !important;
}