Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$content-width: 1140;
$base-font-size: 16;

$columns: 4;
$margin: 1.25;
$class-slug: col;

$breakpoints: (
  sm: (0em, 40em),
  md: (40.063em, 64em),
  lg: (64.063em, 90em)
);

// requires $base-font-size & $content_width
@function gr($content-width) {
  
  $r: (1 + sqrt(5)) / 2; // phi "golden ratio"
  $x: 1 / (2 * $r);
  $y: $base-font-size * $r;
  $z: $content-width / ($y * $y);
  $h: $r - $x * (1 - $z);
  $l: $base-font-size * $h;
  
  @return round($l);
}

/* used for media queries to grab the first or last range of the query */
@function below-query($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range, 1);
}
@function above-query($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

// convert to rems
@function parse-int($n) {
	@return $n / ($n * 0 + 1);
}

@function convert-to-rem($value)  {
  
  $value: parse-int($value) / parse-int($base-font-size) * 1rem;
  
  @if ($value == 0rem) { $value: 0; }
  
  @return $value;
}

@function rem($values) {

  $list:();
  
  @each $value in $values {

	$val: parse-int($value);
	
	$list: append($list, convert-to-rem($value));  
  }
  
  @return $list;
}

.clearfix:after { 
   content: '';
   display: block; 
   height: 0; 
   clear: both;
   visibility: hidden;
}

.container {
	position: relative;
	max-width: $content-width + px;
	margin: 0 auto;
	&:after {
		@extend .clearfix;
	}
}

.full {
	display: inline-block;
	width: 100%;
}

.#{$class-slug} {
	position: relative;
	float: left;
	width: 97.5%;
	//min-height: 1px;
	margin: percentage($margin/100);
	
  //test purposes only
  min-height: 35px;
  background: lime;
  
	.#{$class-slug} {
    background: orange;
	}
}

.collapse .#{$class-slug} {
  margin: percentage($margin/100) 0;
}

@mixin calculate-grid($array, $index) {
  
	// lets iterate through each column and create a class for it
	@for $i from 1 through $columns {
		
		$gw: $i / ($columns/100);
		$rw: $gw - $margin/100 * 2;
		$px_width: ($rw/100)*$content-width;
		$px_margin: ($margin/100) * $content-width;
		
		// lets generate variables from the breakpoints
		$keys: map-keys($array);
		
		.#{nth($keys, $index)}-#{$i} {
			width: $gw - percentage($margin/100) * 2;
			line-height: rem(gr($px_width - $px_margin*2));
		}
		
		.collapse {
		 	.#{nth($keys, $index)}-#{$i} {
		 		width: $gw * 1%;
		 	}
		}
	}
}

// let's calculate a grid with our breakpoints
@each $breakpoint in $breakpoints {
  
  $index: index($breakpoints, $breakpoint);
  $values: map_values($breakpoints);
  $query: nth($values, $index);
  
  @media (min-width: #{below-query($query)}) {
    @include calculate-grid($breakpoints, $index);
  }
}

SassMeister-output.css

/* used for media queries to grab the first or last range of the query */
.clearfix:after, .container:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.container {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}

.full {
  display: inline-block;
  width: 100%;
}

.col {
  position: relative;
  float: left;
  width: 97.5%;
  margin: 1.25%;
  min-height: 35px;
  background: lime;
}
.col .col {
  background: orange;
}

.collapse .col {
  margin: 1.25% 0;
}

@media (min-width: 0em) {
  .sm-1 {
    width: 22.5%;
    line-height: 1.4375rem;
  }

  .collapse .sm-1 {
    width: 25%;
  }

  .sm-2 {
    width: 47.5%;
    line-height: 1.5625rem;
  }

  .collapse .sm-2 {
    width: 50%;
  }

  .sm-3 {
    width: 72.5%;
    line-height: 1.6875rem;
  }

  .collapse .sm-3 {
    width: 75%;
  }

  .sm-4 {
    width: 97.5%;
    line-height: 1.8125rem;
  }

  .collapse .sm-4 {
    width: 100%;
  }
}
@media (min-width: 40.063em) {
  .md-1 {
    width: 22.5%;
    line-height: 1.4375rem;
  }

  .collapse .md-1 {
    width: 25%;
  }

  .md-2 {
    width: 47.5%;
    line-height: 1.5625rem;
  }

  .collapse .md-2 {
    width: 50%;
  }

  .md-3 {
    width: 72.5%;
    line-height: 1.6875rem;
  }

  .collapse .md-3 {
    width: 75%;
  }

  .md-4 {
    width: 97.5%;
    line-height: 1.8125rem;
  }

  .collapse .md-4 {
    width: 100%;
  }
}
@media (min-width: 64.063em) {
  .lg-1 {
    width: 22.5%;
    line-height: 1.4375rem;
  }

  .collapse .lg-1 {
    width: 25%;
  }

  .lg-2 {
    width: 47.5%;
    line-height: 1.5625rem;
  }

  .collapse .lg-2 {
    width: 50%;
  }

  .lg-3 {
    width: 72.5%;
    line-height: 1.6875rem;
  }

  .collapse .lg-3 {
    width: 75%;
  }

  .lg-4 {
    width: 97.5%;
    line-height: 1.8125rem;
  }

  .collapse .lg-4 {
    width: 100%;
  }
}