This is all a "SCSS grid framework" needs to be.

gistfile1.scss

$grid-guttter: 24px;
$page-edge-padding: 12px; //optional additional padding on the edge of the viewport

@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin grid-container() {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-left: $page-edge-padding;
    padding-right: $page-edge-padding;
}

@mixin grid-row() {
    display: block;
    margin-left: -($grid-gutter/2);
    margin-right: -($grid-gutter/2);
    //negative margins allow the gutter to line up to the row, like bootstrap 3's grid
    box-sizing: border-box;
    @include clearfix;
}

// number of columns, total number of columns, optional offset
// " I want [3] of [12] columns, with [1] column of space from the thing to its left"
@mixin grid-columns($number-of-columns, $total-number-of-columns, $columns-offset: 0) {
    width: 100% * ($number-of-columns/$total-number-of-columns);
    float: left;
    box-sizing: border-box;
    padding-left: $grid-gutter/2; 
    padding-right: $grid-gutter/2;
    margin-left: $columns-offset * (100%/$total-number-of-columns);
}

.page-container {
  @include grid-container;
}

.content {
  @include grid-row;
}

.sidebar {
  @include grid-columns(3,12);
  @include breakpoint-medium {
    @include grid-columns(1,6); // no space on tablet, six column grid now
  }
  @include breakpoint-small {
    display: none; // no sidebar on mobile, four column grid now
  }
}

.article {
  @include grid-columns(8,12,1); // one column of space between sidebar and article
  @include breakpoint-medium {
    @include grid-columns(4,6); // no space on tablet, six column grid now
  }
  @include breakpoint-small {
    @include grid-columns(4,4); // no sidebar on mobile, four column grid now
  }
}

gistfile2.html

<div class="page-container">
  <div class="content">
    <div class="sidebar">sidebar content</div>
    <div class="article">article content</div>
  </div>
</div>