Generated by SassMeister.com.

SassMeister-input-HTML.haml

.container
  .left
    left
  .cf
  .middle
    middle
  .right
    right

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.0)
// Singularity Extras (v1.0.0.alpha.3)
// ----

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";

$grid: 12;
$gutter: 1/3;
$break: 700px;

// $include-clearfix: true;

* {
  @include box-sizing('border-box');
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  outline: 1px solid red;
  height: 200px;
}

.left, .middle, .right {
  height: 30px;
  display: block;
  outline: 1px solid black;
}

.cf {clear: right;}

.left {
  @include grid-span(4,1);
}

.middle {
  @include grid-span(4,5);
}

.right {
  background: yellow;
  @include grid-span(4,1);
  clear: left;
  
  @include breakpoint($break) {
    @include grid-span(4,9);
  } 
}

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  outline: 1px solid red;
  height: 200px;
}

.left, .middle, .right {
  height: 30px;
  display: block;
  outline: 1px solid black;
}

.cf {
  clear: right;
}

.left {
  width: 32.2033898305%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.middle {
  width: 32.2033898305%;
  float: left;
  margin-right: -100%;
  margin-left: 33.8983050847%;
  clear: none;
}

.right {
  background: yellow;
  width: 32.2033898305%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  clear: left;
}
@media (min-width: 700px) {
  .right {
    width: 32.2033898305%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div class='container'>
  <div class='left'>
    left
  </div>
  <div class='cf'></div>
  <div class='middle'>
    middle
  </div>
  <div class='right'>
    right
  </div>
</div>