Really simple modular grid using Saas

Modular grid functions

$baseline: 20px;
$gutter: 20px;
$module-width: 60px;
$module-height: $baseline * 3;

@function width($n) {
  @return $n * $gutter;
}

@function height($n) {
  @return $n * $baseline;
}


@function region-width($n) {
  @return $n * $module-width + ($n - 1) * $gutter;
}

@function region-height($n) {
  @return $n * $module-height + ($n - 1) * $baseline;
}

Modular grid usage sample

.page {
    width: region-width(12);
    margin-left:auto;
    margin-right:auto;
}

.header {
    height: region-height(1);
    margin-bottom: height(1);
}