« Back to Index

Basic Sass Grid

View original Gist on GitHub

sass-grid.css

$grid-columns: 12;
$grid-width: 960px;
$grid-gutter: 10px;
@function column-width($cols) {
  @return ($grid-width
           - $grid-gutter * ($grid-columns - 1))
          / $grid-columns * $cols
          + $grid-gutter * ($cols - 1);
}

// Create the columns...
.col-1 { width: column-width(1); }
…
.col-12 { width: column-width(12); }