Responsive SCSS Grid. Very much inspired by Zurb's Foundation Grid.

_responsive_grid.scss

// Constants
$manycols: 12; // Define how many columns your grid has
$colwidth: 100% / $manycols;
$large-threshold: 1200px;
$medium-threshold: 960px;
$small-threshold: 720px;
$tiny-threshold: 480px;

// Base clearfix
%clearfix:after, {
  display: block;
  // overflow: hidden;
  height: 0;
  width: 100%;
  content: " ";
  color: transparent;
  visibility: hidden;
  clear: both;
}

// Container for cages and cols
.container {
  @extend %clearfix;
  width: 100%;
  max-width: $large-threshold;
  margin: auto;
  padding: 0 8px;
  // border: 1px solid red; // debugging
}

// base col
%col {
  @extend %clearfix;
  // border: 1px dotted green; // debugging
  clear: none;
  float: left;
  padding: 8px;
  position: relative;
}

// base cage
%cage {
  // border: 1px dashed blue; // debugging
  @extend %clearfix;
  clear: none;
  float: left;
  // padding: 16px;
  position: relative;
}

// Tiny cages and cols
// Defined first so they can be overridden by later classes
@for $colspan from 1 through $manycols {

  .cage-tiny-#{$colspan} {
    @extend %cage;
    width: $colwidth * $colspan;
  }

  .col-tiny-#{$colspan} {
    @extend %col;
    width: $colwidth * $colspan;
  }

}


// Small cages and cols
// Defined first so they can be overridden by later classes
@for $colspan from 1 through $manycols {

  .cage-small-#{$colspan} {
    @extend %cage;
    width: $colwidth * $colspan;
  }

  .col-small-#{$colspan} {
    @extend %col;
    width: $colwidth * $colspan;
  }

}


// Medium cages and cols
// Defined first so they can be overridden by later classes
@for $colspan from 1 through $manycols {

  .cage-medium-#{$colspan} {
    @extend %cage;
    width: $colwidth * $colspan;
  }

  .col-medium-#{$colspan} {
    @extend %col;
    width: $colwidth * $colspan;
  }

}


// Large cages and cols
// Defined first so they can be overridden by later classes
@for $colspan from 1 through $manycols {

  .cage-large-#{$colspan} {
    @extend %cage;
    width: $colwidth * $colspan;
  }

  .col-large-#{$colspan} {
    @extend %col;
    width: $colwidth * $colspan;
  }

}

// Medium cages and cols
// Here because otherwise the css hierarchy wont' work
@for $colspan from 1 through $manycols {

  @media screen and (max-width: $medium-threshold) {
    .cage-medium-#{$colspan},
    .col-medium-#{$colspan},
    {
      width: $colwidth * $colspan;
    }
  }
}

// Small cages and cols
// Here because otherwise the css hierarchy wont' work
@for $colspan from 1 through $manycols {

  @media screen and (max-width: $small-threshold) {
    .cage-small-#{$colspan},
    .col-small-#{$colspan},
    {
      width: $colwidth * $colspan;
    }
  }
}

// Tiny cages and cols
// Here because otherwise the css hierarchy wont' work
@for $colspan from 1 through $manycols {


  @media screen and (max-width: $tiny-threshold) {
    .cage-tiny-#{$colspan},
    .col-tiny-#{$colspan},
    {
      width: $colwidth * $colspan;
    }
  }
}