Generated by SassMeister.com.

SassMeister-input-HTML.haml

.body
  .columnA
    A
  .columnB
    B
  .columnC
    C

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// Modular Scale (v2.0.5)
// Susy (v2.1.3)
// Toolkit (v2.5.2)
// ----

@import "compass"
@import "modular-scale"
@import "susy"
@import "toolkit/kickstart"

// Using Modular Scale to give me the right values for my grid at all times instead of doing so manually
$list: ms-list( 0, 1, 1, $golden ) 

$susy: layout( (1 2.618 1) .1 isolate fluid border-box split ) 

.body
  +container(1200px overlay show)
  
.columnA
  +span(1 at 1) 
  background: pink
  height: 100vw

.columnB
  +span(1 at 2)
  background: green
  height: 100vw
  
.columnC
  +span(1 at 3)
  background: pink
  height: 100vw

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

.body {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.body:after {
  content: " ";
  display: block;
  clear: both;
}
head {
  display: block;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 999;
  color: #333;
  background: rgba(255, 255, 255, 0.25);
}
head:before {
  content: "|||";
  display: block;
  padding: 5px 10px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
}
head:hover {
  background: rgba(255, 255, 255, 0.5);
  color: red;
}
head:hover ~ .body, head:hover ~ body .body {
  position: relative;
}
head:hover ~ .body:before, head:hover ~ body .body:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxLjAxNjY3JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEuMDE2NjclIiBzdG9wLWNvbG9yPSIjNjY2NmZmIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz48c3RvcCBvZmZzZXQ9IjIxLjM1MDE0JSIgc3RvcC1jb2xvcj0iI2IzYjNmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIyMS4zNTAxNCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIyMy4zODM0OSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIyMy4zODM0OSUiIHN0b3AtY29sb3I9IiM2NjY2ZmYiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPjxzdG9wIG9mZnNldD0iNzYuNjE2NTElIiBzdG9wLWNvbG9yPSIjYjNiM2ZmIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz48c3RvcCBvZmZzZXQ9Ijc2LjYxNjUxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc4LjY0OTg2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijc4LjY0OTg2JSIgc3RvcC1jb2xvcj0iIzY2NjZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI5OC45ODMzMyUiIHN0b3AtY29sb3I9IiNiM2IzZmYiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPjxzdG9wIG9mZnNldD0iOTguOTgzMzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.01667%, rgba(0, 0, 0, 0)), color-stop(1.01667%, rgba(102, 102, 255, 0.25)), color-stop(21.35014%, rgba(179, 179, 255, 0.25)), color-stop(21.35014%, rgba(0, 0, 0, 0)), color-stop(23.38349%, rgba(0, 0, 0, 0)), color-stop(23.38349%, rgba(102, 102, 255, 0.25)), color-stop(76.61651%, rgba(179, 179, 255, 0.25)), color-stop(76.61651%, rgba(0, 0, 0, 0)), color-stop(78.64986%, rgba(0, 0, 0, 0)), color-stop(78.64986%, rgba(102, 102, 255, 0.25)), color-stop(98.98333%, rgba(179, 179, 255, 0.25)), color-stop(98.98333%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 50% 0%, 50% 1, color-stop(100%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.01667%, rgba(102, 102, 255, 0.25) 1.01667%, rgba(179, 179, 255, 0.25) 21.35014%, rgba(0, 0, 0, 0) 21.35014%, rgba(0, 0, 0, 0) 23.38349%, rgba(102, 102, 255, 0.25) 23.38349%, rgba(179, 179, 255, 0.25) 76.61651%, rgba(0, 0, 0, 0) 76.61651%, rgba(0, 0, 0, 0) 78.64986%, rgba(102, 102, 255, 0.25) 78.64986%, rgba(179, 179, 255, 0.25) 98.98333%, rgba(0, 0, 0, 0) 98.98333%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.01667%, rgba(102, 102, 255, 0.25) 1.01667%, rgba(179, 179, 255, 0.25) 21.35014%, rgba(0, 0, 0, 0) 21.35014%, rgba(0, 0, 0, 0) 23.38349%, rgba(102, 102, 255, 0.25) 23.38349%, rgba(179, 179, 255, 0.25) 76.61651%, rgba(0, 0, 0, 0) 76.61651%, rgba(0, 0, 0, 0) 78.64986%, rgba(102, 102, 255, 0.25) 78.64986%, rgba(179, 179, 255, 0.25) 98.98333%, rgba(0, 0, 0, 0) 98.98333%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1.01667%, rgba(102, 102, 255, 0.25) 1.01667%, rgba(179, 179, 255, 0.25) 21.35014%, rgba(0, 0, 0, 0) 21.35014%, rgba(0, 0, 0, 0) 23.38349%, rgba(102, 102, 255, 0.25) 23.38349%, rgba(179, 179, 255, 0.25) 76.61651%, rgba(0, 0, 0, 0) 76.61651%, rgba(0, 0, 0, 0) 78.64986%, rgba(102, 102, 255, 0.25) 78.64986%, rgba(179, 179, 255, 0.25) 98.98333%, rgba(0, 0, 0, 0) 98.98333%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 100% 24px;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  background-position: left top;
}

.columnA {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20.33347%;
  float: left;
  margin-left: 1.01667%;
  margin-right: -100%;
  background: pink;
  height: 100vw;
}

.columnB {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 53.23302%;
  float: left;
  margin-left: 23.38349%;
  margin-right: -100%;
  background: green;
  height: 100vw;
}

.columnC {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 20.33347%;
  float: left;
  margin-left: 78.64986%;
  margin-right: -100%;
  background: pink;
  height: 100vw;
}

SassMeister-rendered.html

<div class='body'>
  <div class='columnA'>
    A
  </div>
  <div class='columnB'>
    B
  </div>
  <div class='columnC'>
    C
  </div>
</div>