Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="window">
  <section></section>
  <aside></aside>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//
// SET UP GRID FUNCTIONS
//

$site-width: 100%;

// total width of page
$width : $site-width;
// number of columns
$columns: 12;
// margin between columns
$col_margin: 1%;

//mixin to provide a clear to modern browsers IE8 and up
@mixin clear {
  &::after {
    clear: both;
    content: "";
    display: table;
  }
}

// maths
$col_width: ($width - ($col_margin * ($columns - 1))) / $columns;
$col_total_width: $col_width + $col_margin;

// create containing row
@mixin row() {
  @include clear;
  width: $width;
}

// create a column
@mixin col($n: 1) {
  float: left;
  @include span($n);
}

// make an element span N columns
@mixin span($n: 1) {
  width: ($n * $col_width) + (($n - 1) * $col_margin);
  @if $n == $columns {
    margin-right: 0;
  }
  @else {
    margin-right: $col_margin;
  }
}

// the last column in a row needs this
@mixin last() {
  margin-right: 0;
}

// if you need to overwrite a previous `last()`, use this
@mixin resetLast() {
  margin-right: $col_margin;
}

// prepend n blank columns
@mixin prepend($n: 1) {
  margin-left: $col_total_width * $n
}

// append n blank columns
@mixin append($n: 1) {
  margin-right: $col_total_width * $n + $col_margin
}

//
// END GRID SET UP - BEGIN REAL STYLES
//
html,
body {
  padding: 0;
  margin: 0;
}
.window {
  @include row;
}
section {
  @include col(12);
  background-color: lightblue;
  height: 200px;
    
  @media (min-width: 60em) {
    @include col(8);
  }
}
aside {
  @include col(12);
  background-color: pink;
  height: 200px;
  
  @media (min-width: 60em) {
    @include col(4);
    @include last();
  }
}

SassMeister-output.css

html,
body {
  padding: 0;
  margin: 0;
}

.window {
  width: 100%;
}
.window::after {
  clear: both;
  content: "";
  display: table;
}

section {
  float: left;
  width: 100%;
  margin-right: 0;
  background-color: lightblue;
  height: 200px;
}
@media (min-width: 60em) {
  section {
    float: left;
    width: 66.33333%;
    margin-right: 1%;
  }
}

aside {
  float: left;
  width: 100%;
  margin-right: 0;
  background-color: pink;
  height: 200px;
}
@media (min-width: 60em) {
  aside {
    float: left;
    width: 32.66667%;
    margin-right: 1%;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<div class="window">
  <section></section>
  <aside></aside>
</div>