Sass Grid Calculator

mixins.scss

// Grid System
// -------------------------

@function calculateRowMargin($gridGutterWidth) {
  @return ($gridGutterWidth * -1);
}

@function calculateColumnWidth($i, $gridColumnWidth, $gridGutterWidth) {
  @return ($i * $gridColumnWidth) + (($i - 1) * $gridGutterWidth);
}

@function calculateOffsets($i, $gridColumnWidth, $gridGutterWidth) {
  @return ($i * $gridColumnWidth) + (($i + 1) * $gridGutterWidth);
}

@mixin makeRow($gridGutterWidth) {
  .row {
    margin-left: calculateRowMargin($gridGutterWidth) + px;
  }
}

@mixin makeColumns($columns, $gridColumnWidth, $gridGutterWidth) {

  [class*="span"] {
    float: left;
    margin-left: $gridGutterWidth + px;
  }

  @for $i from 1 through $columns {
    .span#{$i} {
      width: calculateColumnWidth($i, $gridColumnWidth, $gridGutterWidth) + px
    }
    .offset#{$i} {
      margin-left: calculateOffsets($i, $gridColumnWidth, $gridGutterWidth) + px
    }
  }

}