Grid calculator for SCSS.

gridCalculator.scss

$maxGridWidth: 1280px;
$marginWidth: 8px;
$gutterWidth: 16px;
$numMaxColumns: 16;
$singleColumnWidth: ($maxGridWidth - $marginWidth * 2 - $gutterWidth * ($numMaxColumns - 1)) / $numMaxColumns;

@function calColumnWidth($numColumns) {
  @if $numColumns <= 0 {
    @return 0px;
  }
  @return $singleColumnWidth * $numColumns + $gutterWidth * ($numColumns - 1);
}

.grid-container { width: $maxGridWidth; }
.grid-01 { width: calColumnWidth(01); }
.grid-02 { width: calColumnWidth(02); }
.grid-03 { width: calColumnWidth(03); }
.grid-04 { width: calColumnWidth(04); }
.grid-05 { width: calColumnWidth(05); }
.grid-06 { width: calColumnWidth(06); }
.grid-07 { width: calColumnWidth(07); }
.grid-08 { width: calColumnWidth(08); }
.grid-09 { width: calColumnWidth(09); }
.grid-10 { width: calColumnWidth(10); }
.grid-11 { width: calColumnWidth(11); }
.grid-12 { width: calColumnWidth(12); }
.grid-13 { width: calColumnWidth(13); }
.grid-14 { width: calColumnWidth(14); }
.grid-15 { width: calColumnWidth(15); }
.grid-16 { width: calColumnWidth(16); }