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 $span >= 1 {
		// Convert the given span to a fraction of the columns
		@return percentage($span / $columns);
	} @else {
		// A fraction or number has been supplied so lets just
		// converting it into 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);
}

@mixin gel-push-columns($span, $columns: $gel-total-columns) {
  position: relative;
  left: gel-columns($span, $columns);
  right: auto;
}


@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);
}

.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);
}

SassMeister-output.css

.box {
  width: 33.33333%;
  width: 83.33333%;
  width: 4.16667%;
  width: 4.16667%;
  width: 25%;
}

.box--mixin {
  width: 33.33333%;
  width: 83.33333%;
  width: 4.16667%;
  width: 4.16667%;
  width: 25%;
}

.box--push {
  width: 33.33333%;
  position: relative;
  left: 8.33333%;
  right: auto;
}

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