Generated by SassMeister.com.

SassMeister-input-HTML.haml

.body
  .columnA
    A
  .columnB
    B
  

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 isolate fluid border-box inside ) 

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

.columnB
  +span(1 at 2)
  background: green
  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+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIyOC44MTA5JSIgc3RvcC1jb2xvcj0iI2IzYjNmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIyOC44MTA5JSIgc3RvcC1jb2xvcj0iIzY2NjZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjNiM2ZmIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(102, 102, 255, 0.25)), color-stop(28.8109%, rgba(179, 179, 255, 0.25)), color-stop(28.8109%, rgba(102, 102, 255, 0.25)), color-stop(100%, rgba(179, 179, 255, 0.25))), -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(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 28.8109%, rgba(102, 102, 255, 0.25) 28.8109%, rgba(179, 179, 255, 0.25)), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 28.8109%, rgba(102, 102, 255, 0.25) 28.8109%, rgba(179, 179, 255, 0.25)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 28.8109%, rgba(102, 102, 255, 0.25) 28.8109%, rgba(179, 179, 255, 0.25)), 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: 28.8109%;
  float: left;
  margin-left: 0;
  margin-right: -100%;
  padding-left: 1.30959%;
  padding-right: 1.30959%;
  background: pink;
  height: 100vw;
}

.columnB {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 71.1891%;
  float: left;
  margin-left: 28.8109%;
  margin-right: -100%;
  padding-left: 1.30959%;
  padding-right: 1.30959%;
  background: green;
  height: 100vw;
}

SassMeister-rendered.html

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