Couple of simple mixins to help with responsive grids in SCSS

grid.scss

/*
 * Simple grid system
 */

@mixin clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}

@mixin grid-container($columns, $width, $margin) {
  @include clearfix;
  $item-width: ($width - (($columns - 1) * $margin)) / $columns;
  $total-width: ($item-width + $margin) * $columns;
  width: ($total-width / $width) * 100%;
  overflow: hidden;
}

@mixin grid-column($columns, $width, $margin) {
  $item-width: ($width - (($columns - 1) * $margin)) / $columns;
  $total-width: ($item-width + $margin) * $columns;
  width: ($item-width / $total-width) * 100%;
  margin: 0 ($margin / $total-width) * 100% $margin 0;
  float: left;
  overflow: hidden;
}