Basic SCSS grid system using margin gutters - allows grid items to have background colors/images without bleeding into gutters

grid.scss

/*
* KNOWN ISSUES
- gutter needs to be percentage based
- grid containers that don't fit full-width don't clear grid containers below them. May need "clear: both" on grid containers.


* TODO
- test further
- add bottom margin to grid-container?
- move margin-bottom to grid-container instead of removing from last-child?
- how to reset $columns on the next grid-container if it's been redefined 

*/

$gutter: 2%; // gutter size
$columns: 5; // columns
$total: 100%; // total width

@mixin grid-container() {
  //clear: both;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin grid-item(
  $span: 1
  
) {
  
@if ($span > $columns) {
    $span: $columns;
  }
  @include box-sizing(border-box);
  padding: 1em;
  float: left;
  width: ( ($total - ( ($columns - 1) * $gutter ) ) * ($span/$columns) ) + ( ($span - 1) * $gutter);
  @if ($span != $columns or $span > $columns) {
    margin-right: $gutter;
  }
  margin-bottom: $gutter;
  background: yellow; // testing
  &:last-child {
    margin-right: 0;
    margin-bottom: 0;
  }
}

Moved to https://github.com/jhebb/easy-grid