Generated by SassMeister.com.

SassMeister-input-HTML.html

<section class='wrapper'>
  <header>
    <nav>
      <ul>
        <li>Button</li>
      </ul>
    </nav>
  </header>
  <section class='content'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.

</p>
  </section>
  <section class='content'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.
</p>

  </section>
  <section class='map'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.

</p>
  </section>
  <section class='content'>
  <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.
</p>

  </section>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import "compass/reset";
@import "susy";

nav {
  height : 120px;
  background-color : green;
}
.map {
  background-color: green;
  height : 120px;
}
.wrapper {
  @include container;
  background-color : red;
}
.content {
  @include container(80%);
  background-color: blue;
  &:nth-of-type(even) {
    background-color : orange;
  }
  p {
    @include span (isolate 10 at 2 of 12);
  }
}

SassMeister-output.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

nav {
  height: 120px;
  background-color: green;
}

.map {
  background-color: green;
  height: 120px;
}

.wrapper {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: red;
}
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: blue;
}
.content:after {
  content: " ";
  display: block;
  clear: both;
}
.content:nth-of-type(even) {
  background-color: orange;
}
.content p {
  width: 83.05085%;
  float: left;
  margin-left: 8.47458%;
  margin-right: -100%;
}

SassMeister-rendered.html

<section class='wrapper'>
  <header>
    <nav>
      <ul>
        <li>Button</li>
      </ul>
    </nav>
  </header>
  <section class='content'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.

</p>
  </section>
  <section class='content'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.
</p>

  </section>
  <section class='map'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.

</p>
  </section>
  <section class='content'>
  <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis.

Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat.
</p>

  </section>
</section>