Sass Grid Mixin

sass-grid-dbeach.sass

@mixin grid($columns, $gutter: 0, $span: 1, $last: false, $nth: false, $prepend: 0, $append: 0, $padding-allowance: 0) 
  // Single column minus gutters

  $column-width: (100 - ($columns - 1) * $gutter) / $columns
  // Column width times # of columns + inner gutters
  width: $column-width * $span + $gutter * ($span - 1) - $padding-allowance + 0%
  @if $last
    margin-right: 0
  @else
    margin-right: $gutter + 0%

  @if $prepend > 0
    padding-left: ($column-width + $gutter) * $prepend + 0%

  @if $append > 0
    padding-right: $column-width * $append + $gutter * ($append - 1) + 0%

  @if $nth 
    &:nth-child(#{$columns}n)
      margin-right: 0

Implementation would look like this:

#element-list li
  +grid(3, 1.5)

Which would set up a three column grid with 1.5% spacing between columns.

Another usage:

aside#id-name
  +grid(6, 3, 4, $last: true)

Would calculate for a six column grid with 3% spacing between columns. This element would span 4 columns and not have any right margins because it will be flush with the right edge of its container.