Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="page">
    <div class="banner">
        <p class="logo">this is my logo</p>
        <p>this is my header</p>
    </div>

    <ul class="pagenav">
        <li>nav link</li>
        <li>nav link 2</li>
    </ul>

    <div class="main">
        <div class="summary">
            the summary
        </div>
        <div class="content">
            the content
        </div>
    </div>
    
    <div class="contentinfo">
        this is my contentinfo
    </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";
@import "susy";
$total-columns  : 7;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;
$break: 12 oldie;

body {
    border:10px solid rgba(0,0,0,0.2);
    font-family:sans-serif;
    margin:0;
    padding:0;
    overflow-x:hidden;
}
.page {
    @include container($total-columns, $break);
    color:#fff;
}

.banner {
    background-color: #c30c30;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDUgMTAnPgoJPHJlY3Qgd2lkdGg9JzExMCUnIHg9Jy01JScgeT0nLTUlJyBoZWlnaHQ9JzExMCUnIGZpbGw9JyNjMzBjMzAnLz4KCTxsaW5lIHgxPSctMicgeTE9JzEnIHgyPSc3JyB5Mj0nMTAnIHN0cm9rZT0nI2Q2Mjc0Nycgc3Ryb2tlLXdpZHRoPScxLjg3Jy8+Cgk8bGluZSB4MT0nLTInIHkxPSc2JyB4Mj0nNycgeTI9JzE1JyBzdHJva2U9JyNkNjI3NDcnIHN0cm9rZS13aWR0aD0nMS44NycvPgoJPGxpbmUgeDE9Jy0yJyB5MT0nLTQnIHgyPSc3JyB5Mj0nNScgc3Ryb2tlPScjZDYyNzQ3JyBzdHJva2Utd2lkdGg9JzEuODcnLz4KPC9zdmc+');
    color:#fff;
    @include span-columns(7);
    @include bleed(10);
    
    .logo {
        background:#fff;
        color:#000;
        padding:20px;
        @include span-columns(2);
    }
}

.pagenav {
    background-color: #d62dd6;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDUgMTAnPgoJPHJlY3Qgd2lkdGg9JzExMCUnIHg9Jy01JScgeT0nLTUlJyBoZWlnaHQ9JzExMCUnIGZpbGw9JyNkNjJkZDYnLz4KCTxsaW5lIHgxPSctMicgeTE9JzEnIHgyPSc3JyB5Mj0nMTAnIHN0cm9rZT0nI2I4MDliOCcgc3Ryb2tlLXdpZHRoPScxLjg3Jy8+Cgk8bGluZSB4MT0nLTInIHkxPSc2JyB4Mj0nNycgeTI9JzE1JyBzdHJva2U9JyNiODA5YjgnIHN0cm9rZS13aWR0aD0nMS44NycvPgoJPGxpbmUgeDE9Jy0yJyB5MT0nLTQnIHgyPSc3JyB5Mj0nNScgc3Ryb2tlPScjYjgwOWI4JyBzdHJva2Utd2lkdGg9JzEuODcnLz4KPC9zdmc+');
    @include span-columns(7);
    @include bleed(10);
    margin-top:0;
    li {
        line-height:50px;
        list-style:none;
        float:left;
    }
}

.main {
    border:1px solid #000;
    color:#000;
    @include span-columns(7);
    margin:40px 0;
    //padding:20px;
    
    .summary {
        border:1px solid green;
        @include span-columns(3 omega,7);
        padding:20px;
    }
}
.contentinfo {
    background:black;
    clear:both;
    margin: 0 0 - $grid-padding;
    padding: 20px $grid-padding;
}

SassMeister-output.css

body {
  border: 10px solid rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.page {
  *zoom: 1;
  max-width: 34em;
  _width: 34em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}
.page:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 59em) {
  .page {
    max-width: 59em;
  }
}
.oldie .page {
  max-width: 59em;
  _width: 59em;
}

.banner {
  background-color: #c30c30;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDUgMTAnPgoJPHJlY3Qgd2lkdGg9JzExMCUnIHg9Jy01JScgeT0nLTUlJyBoZWlnaHQ9JzExMCUnIGZpbGw9JyNjMzBjMzAnLz4KCTxsaW5lIHgxPSctMicgeTE9JzEnIHgyPSc3JyB5Mj0nMTAnIHN0cm9rZT0nI2Q2Mjc0Nycgc3Ryb2tlLXdpZHRoPScxLjg3Jy8+Cgk8bGluZSB4MT0nLTInIHkxPSc2JyB4Mj0nNycgeTI9JzE1JyBzdHJva2U9JyNkNjI3NDcnIHN0cm9rZS13aWR0aD0nMS44NycvPgoJPGxpbmUgeDE9Jy0yJyB5MT0nLTQnIHgyPSc3JyB5Mj0nNScgc3Ryb2tlPScjZDYyNzQ3JyBzdHJva2Utd2lkdGg9JzEuODcnLz4KPC9zdmc+");
  color: #fff;
  width: 100%;
  float: left;
  margin-right: 2.94118%;
  display: inline;
  margin-left: -147.05882%;
  padding-left: 147.05882%;
  margin-right: -147.05882%;
  padding-right: 147.05882%;
}
.banner .logo {
  background: #fff;
  color: #000;
  padding: 20px;
  width: 26.47059%;
  float: left;
  margin-right: 2.94118%;
  display: inline;
}

.pagenav {
  background-color: #d62dd6;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDUgMTAnPgoJPHJlY3Qgd2lkdGg9JzExMCUnIHg9Jy01JScgeT0nLTUlJyBoZWlnaHQ9JzExMCUnIGZpbGw9JyNkNjJkZDYnLz4KCTxsaW5lIHgxPSctMicgeTE9JzEnIHgyPSc3JyB5Mj0nMTAnIHN0cm9rZT0nI2I4MDliOCcgc3Ryb2tlLXdpZHRoPScxLjg3Jy8+Cgk8bGluZSB4MT0nLTInIHkxPSc2JyB4Mj0nNycgeTI9JzE1JyBzdHJva2U9JyNiODA5YjgnIHN0cm9rZS13aWR0aD0nMS44NycvPgoJPGxpbmUgeDE9Jy0yJyB5MT0nLTQnIHgyPSc3JyB5Mj0nNScgc3Ryb2tlPScjYjgwOWI4JyBzdHJva2Utd2lkdGg9JzEuODcnLz4KPC9zdmc+");
  width: 100%;
  float: left;
  margin-right: 2.94118%;
  display: inline;
  margin-left: -147.05882%;
  padding-left: 147.05882%;
  margin-right: -147.05882%;
  padding-right: 147.05882%;
  margin-top: 0;
}
.pagenav li {
  line-height: 50px;
  list-style: none;
  float: left;
}

.main {
  border: 1px solid #000;
  color: #000;
  width: 100%;
  float: left;
  margin-right: 2.94118%;
  display: inline;
  margin: 40px 0;
}
.main .summary {
  border: 1px solid green;
  width: 41.17647%;
  float: right;
  margin-right: 0;
  *margin-left: -1em;
  display: inline;
  padding: 20px;
}

.contentinfo {
  background: black;
  clear: both;
  margin: 0 -1em;
  padding: 20px 1em;
}

SassMeister-rendered.html

<div class="page">
    <div class="banner">
        <p class="logo">this is my logo</p>
        <p>this is my header</p>
    </div>

    <ul class="pagenav">
        <li>nav link</li>
        <li>nav link 2</li>
    </ul>

    <div class="main">
        <div class="summary">
            the summary
        </div>
        <div class="content">
            the content
        </div>
    </div>
    
    <div class="contentinfo">
        this is my contentinfo
    </div>
</div>