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;

#wrapper {
  overflow: hidden;
  padding-left: $left;
  padding-right: $right;
  background: #aaa;
  max-width: 1280px;
  margin: 0 auto;
}

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

.layout-breaker {
  width: 120%;
  background: red;
  display: block;
}

#left {
  width: $left;
  margin-left: -$left;
  float: left;
  background: #faa;
}

#main {
  float: left;
  top: 5px;
  width: 100%;
  background: #afa;
  margin-right: -100%;
  height: 200px;
}

#right {
  margin-right: -$right;
  margin-left: -100%;
  width: $right;
  float: right;
  background: #aaf;
}

SassMeister-output.css

#wrapper {
  overflow: hidden;
  padding-left: 160px;
  padding-right: 300px;
  background: #aaa;
  max-width: 1280px;
  margin: 0 auto;
}

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

.layout-breaker {
  width: 120%;
  background: red;
  display: block;
}

#left {
  width: 160px;
  margin-left: -160px;
  float: left;
  background: #faa;
}

#main {
  float: left;
  top: 5px;
  width: 100%;
  background: #afa;
  margin-right: -100%;
  height: 200px;
}

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

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>