Generated by SassMeister.com.

SassMeister-input-HTML.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://basehold.it/16">
<div class="container">
  <div class="sub-container">
    <h1>Carlton Streetcar</h1>
    <h4>506</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque ** volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
  <div class="sub-container">
    <div class="map"></div>
  </div>
</div>
  <div class="chart"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Bourbon (v4.2.0)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

  h1 {
    color: darken(green, 5);
    margin: .4em 0 .2em;
  }
  h4 {
    color: darken(red, 10);
    margin: 0 0 1.3em;
    
  }
  p {
    line-height: 2;
    margin: 0;
  }
  .map {
    width: 100%;
    background: #222;
    height: 11em;
    margin-top: 1em;
  }
  .chart {
    @include outer-container;
    width: 100%;
    background: #222;
    height: 192px;
    margin-top: 2.4em;
  }

.container {
  @include outer-container;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif; 
  .sub-container {
    @include span-columns(6);
  }
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  color: #006700;
  margin: .4em 0 .2em;
}

h4 {
  color: #cc0000;
  margin: 0 0 1.3em;
}

p {
  line-height: 2;
  margin: 0;
}

.map {
  width: 100%;
  background: #222;
  height: 11em;
  margin-top: 1em;
}

.chart {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background: #222;
  height: 192px;
  margin-top: 2.4em;
}
.chart:before, .chart:after {
  content: " ";
  display: table;
}
.chart:after {
  clear: both;
}

.container {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
.container:before, .container:after {
  content: " ";
  display: table;
}
.container:after {
  clear: both;
}
.container .sub-container {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.container .sub-container:last-child {
  margin-right: 0;
}

SassMeister-rendered.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://basehold.it/16">
<div class="container">
  <div class="sub-container">
    <h1>Carlton Streetcar</h1>
    <h4>506</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque ** volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
  <div class="sub-container">
    <div class="map"></div>
  </div>
</div>
  <div class="chart"></div>