Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="wrapper">
  <div id="main">Main <span class="layout-breaker">Breaker</span></div>
  <div id="left">Left <span class="layout-breaker">Breaker</span></div>
  <div id="right">Right <span class="layout-breaker">Breaker</span></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

$left: 160px;
$right: 300px;

%full-height {
  padding-bottom: 1000%;
  margin-bottom: -1000%;
}

%clearfix {
  overflow: hidden;
}

@mixin sidebar($position, $width) {
  $map-opposite: (left: right, right: left);
  $opposite: map-get($map-opposite, $position);
  width: $width;
  margin-#{$position}: -($width);
  margin-#{$opposite}: -100%;
  overflow: hidden;
  float: $position;
}

* { box-sizing: border-box; margin: 0; padding: 0;}
html { min-height: 100% ;}
body { min-height: 100%; font-family: sans-serif;}

#wrapper {
  min-height: 100%;
  position: relative;
  padding-left: $left;
  padding-right: $right;
  max-width: 1280px;
  margin: 0 auto;
  background: #aaa;
  overflow: auto;
}

#left, #main, #right {
  padding: 10px;
  box-sizing: border-box;
  min-height: 100%;
  //@extend %full-height;
}

.layout-breaker {
  width: 120%;
  padding: 10px;
  border: 2px dashed #555;
  display: block;
}
#right .layout-breaker {
  height: 800px;
}

#main {
  float: left;
  margin-right: -100%;
  width: 100%;
  background: #ddd;
}

#left {
  @include sidebar(left, $left);
  background: #eaa;
}
#right {
  @include sidebar(right, $right);
  background: #aca;
}

SassMeister-output.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  font-family: sans-serif;
}

#wrapper {
  min-height: 100%;
  position: relative;
  padding-left: 160px;
  padding-right: 300px;
  max-width: 1280px;
  margin: 0 auto;
  background: #aaa;
  overflow: auto;
}

#left, #main, #right {
  padding: 10px;
  box-sizing: border-box;
  min-height: 100%;
}

.layout-breaker {
  width: 120%;
  padding: 10px;
  border: 2px dashed #555;
  display: block;
}

#right .layout-breaker {
  height: 800px;
}

#main {
  float: left;
  margin-right: -100%;
  width: 100%;
  background: #ddd;
}

#left {
  width: 160px;
  margin-left: -160px;
  margin-right: -100%;
  overflow: hidden;
  float: left;
  background: #eaa;
}

#right {
  width: 300px;
  margin-right: -300px;
  margin-left: -100%;
  overflow: hidden;
  float: right;
  background: #aca;
}

SassMeister-rendered.html

<div id="wrapper">
  <div id="main">Main <span class="layout-breaker">Breaker</span></div>
  <div id="left">Left <span class="layout-breaker">Breaker</span></div>
  <div id="right">Right <span class="layout-breaker">Breaker</span></div>
</div>