_mixin-column.scss

/*
 * This mixin is used to calculate the max-width of an element within it's wrapper.
 *
 * The columns have a flexible width
 * The columns are divided by a gutter
 * The gutters have a fixed width of 40px
 * 
 */

@mixin column($columnsWanted, $total: 12) {
  $columnsTotal: $total;
  $gapSize: 40;
  $percentage: (($columnsWanted / $columnsTotal) * 100) * 1%;
  $offset: ($gapSize / $columnsTotal) * ($columnsTotal - $columnsWanted) + px;

  @if $columnsWanted == $columnsTotal {
    width: 100%;
    max-width: calc(#{$percentage} - #{$offset});
  }
}

/*
 * Example
 */

// overlap 10 of 12 columns
.main-wrapper {
  @include column(10);
  
  // This wrapper should overlap 5 columns of its parent overlapping 10
  .main-wrapper-child {
    @include column(5, 10);
    
    .main-wrapper-grand-child {
      // should overlap 3 of the 5
      @include columns(3, 5);
    }
  }
}