Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapper">
  <div id="container3-1">
	  <div id="container2-1">
		  <div id="container1-1">
    	  <div id="col1-1">Column 1</div>
    		<div id="col2-1">Column 2</div>
    		<div id="col3-1">Column 3</div>
      </div>
    </div>
  </div>
</div>

<div class="wrapper">
  <div id="container3-2">
	  <div id="container2-2">
		  <div id="container1-2">
	  	  <div id="col1-2">Column 1</div>
			  <div id="col2-2">Column 2</div>
		    <div id="col3-2">Column 3</div>
		  </div>
	  </div>
  </div>
</div>

<div class="wrapper">
  <div id="container3-3">
	  <div id="container2-3">
		  <div id="container1-3">
	  	  <div id="left">Column 1</div>
			  <div id="main">Column 2</div>
		    <div id="right">Column 3</div>
		  </div>
	  </div>  
  </div>
</div>

<div class="wrapper">
  <div id="container3-4">
	  <div id="container2-4">
		  <div id="container1-4">
	  	  <div id="siderbar-first">Column 1</div>
			  <div id="main-col">Column 2</div>
		    <div id="sidebar-second">Column 3</div>
		  </div>
	  </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@mixin equalHeight(
$cols,
$sidebar-first-bgcolor: #f3d33c,
$main-bgcolor: #36c23e,
$sidebar-second-bgcolor:#de332d,
$sidebar-first-container:unquote("#container3"),
$main-col-container:unquote("#container2"),
$sidebar-second-container:unquote("#container1"),
$sidebar-first:unquote("#left"),
$main-col:unquote("#main"),
$sidebar-second:unquote("#right"),
$sidebar-first-width:0,
$main-col-width:0,
$sidebar-second-width:0,
$gap:20){
  #{$sidebar-first-container}{
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color:$sidebar-second-bgcolor;
  }
  #{$main-col-container}{
    float: left;
    width: 100%;
    position: relative;
    background-color:$main-bgcolor;
    right: $sidebar-second-width * 1px;//equal sidebar second width
  }
  #{$sidebar-second-container}{
    float:left;
    width:100%;
    position:relative;
    background-color:$sidebar-first-bgcolor;
    right:($main-col-width + $gap) * 1px;//equal main second width
  }
  #{$sidebar-first}{
    float: left;
    position: relative;
    overflow: hidden;
    width: $sidebar-first-width * 1px;
    left: ($sidebar-second-width + $main-col-width + $gap) * 1px;;
  }
  #{$main-col}{
    float: left;
    position: relative;
    overflow: hidden;
    width: $main-col-width * 1px;
    left: ($sidebar-second-width + $main-col-width + $gap * 2) * 1px;
  }
  #{$sidebar-second}{
    float: left;
    position: relative;
    overflow: hidden;
    width: $sidebar-second-width * 1px;
    left:($sidebar-second-width + $main-col-width + $gap * 3) * 1px;
  }
}

@include equalHeight(3,#ffcedf,#44ffee,#de4567,'#container3-1','#container2-1','#container1-1','#col1-1','#col2-1','#col3-1',220,480,220,20);
@include equalHeight(3,#e67,#f36,#567,'#container3-2','#container2-2','#container1-2','#col1-2','#col2-2','#col3-2',180,540,220,10);
@include equalHeight(3,#ccc,#f78,#e67,'#container3-3','#container2-3','#container1-3','#left','#main','#right',540,180,200,20);
@include equalHeight(3,#b5bfef,#ff7e8e,#6eee67,'#container3-4','#container2-4','#container1-4','#siderbar-first','#main-col','#sidebar-second',500,210,210,20);

.wrapper {
  width: 960px;
  margin: 10px auto;
  overflow: hidden;
}

SassMeister-output.css

#container3-1 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #de4567;
}

#container2-1 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #44ffee;
  right: 220px;
}

#container1-1 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #ffcedf;
  right: 500px;
}

#col1-1 {
  float: left;
  position: relative;
  overflow: hidden;
  width: 220px;
  left: 720px;
}

#col2-1 {
  float: left;
  position: relative;
  overflow: hidden;
  width: 480px;
  left: 740px;
}

#col3-1 {
  float: left;
  position: relative;
  overflow: hidden;
  width: 220px;
  left: 760px;
}

#container3-2 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #556677;
}

#container2-2 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #ff3366;
  right: 220px;
}

#container1-2 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #ee6677;
  right: 550px;
}

#col1-2 {
  float: left;
  position: relative;
  overflow: hidden;
  width: 180px;
  left: 770px;
}

#col2-2 {
  float: left;
  position: relative;
  overflow: hidden;
  width: 540px;
  left: 780px;
}

#col3-2 {
  float: left;
  position: relative;
  overflow: hidden;
  width: 220px;
  left: 790px;
}

#container3-3 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ee6677;
}

#container2-3 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #ff7788;
  right: 200px;
}

#container1-3 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #cccccc;
  right: 200px;
}

#left {
  float: left;
  position: relative;
  overflow: hidden;
  width: 540px;
  left: 400px;
}

#main {
  float: left;
  position: relative;
  overflow: hidden;
  width: 180px;
  left: 420px;
}

#right {
  float: left;
  position: relative;
  overflow: hidden;
  width: 200px;
  left: 440px;
}

#container3-4 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #6eee67;
}

#container2-4 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #ff7e8e;
  right: 210px;
}

#container1-4 {
  float: left;
  width: 100%;
  position: relative;
  background-color: #b5bfef;
  right: 230px;
}

#siderbar-first {
  float: left;
  position: relative;
  overflow: hidden;
  width: 500px;
  left: 440px;
}

#main-col {
  float: left;
  position: relative;
  overflow: hidden;
  width: 210px;
  left: 460px;
}

#sidebar-second {
  float: left;
  position: relative;
  overflow: hidden;
  width: 210px;
  left: 480px;
}

.wrapper {
  width: 960px;
  margin: 10px auto;
  overflow: hidden;
}

SassMeister-rendered.html

<div class="wrapper">
  <div id="container3-1">
	  <div id="container2-1">
		  <div id="container1-1">
    	  <div id="col1-1">Column 1</div>
    		<div id="col2-1">Column 2</div>
    		<div id="col3-1">Column 3</div>
      </div>
    </div>
  </div>
</div>

<div class="wrapper">
  <div id="container3-2">
	  <div id="container2-2">
		  <div id="container1-2">
	  	  <div id="col1-2">Column 1</div>
			  <div id="col2-2">Column 2</div>
		    <div id="col3-2">Column 3</div>
		  </div>
	  </div>
  </div>
</div>

<div class="wrapper">
  <div id="container3-3">
	  <div id="container2-3">
		  <div id="container1-3">
	  	  <div id="left">Column 1</div>
			  <div id="main">Column 2</div>
		    <div id="right">Column 3</div>
		  </div>
	  </div>  
  </div>
</div>

<div class="wrapper">
  <div id="container3-4">
	  <div id="container2-4">
		  <div id="container1-4">
	  	  <div id="siderbar-first">Column 1</div>
			  <div id="main-col">Column 2</div>
		    <div id="sidebar-second">Column 3</div>
		  </div>
	  </div>
  </div>
</div>