Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapper">
  <header>
    <h1>Header!</h1>
  </header>
  <aside>
    <p>Organic white strong doppio froth white redeye sugar medium single shot cultivar to go. Cup wings, decaffeinated robusta at saucer strong. Et, viennese strong aromatic a qui wings turkish single origin. Iced seasonal, grinder cultivar viennese steamed decaffeinated latte. Redeye so sugar bar cappuccino, cup acerbic, caramelization wings caffeine and espresso.</p>
<p>Saucer so, cortado flavour whipped aromatic variety aromatic. Con panna doppio blue mountain at plunger pot macchiato cup ristretto filter. Froth cream robust, viennese cappuccino mocha, whipped macchiato blue mountain beans froth. Mug rich doppio sit ristretto variety americano kopi-luwak. Aromatic half and half robust percolator roast caffeine con panna.</p>
  </aside>
  <section class="main">
    <ul class="pictures">
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
    </ul>
  </section>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Bitters (v0.9.2)
// Bourbon (v3.2.0.beta.1.a)
// Neat (v1.5.0)
// ----

// Frameworks
@import 'bourbon/bourbon';
@import 'neat/neat';
@import 'bitters/bitters';

// Variables
$primary-color: #ccc;
$medium: new-breakpoint(min-width 600px 12);
$large: new-breakpoint(min-width 800px 12);

//Layout
.wrapper { 
  @include outer-container;
  header {
    background: $primary-color;
    margin: .5em 0;
    padding: 1em;
  }
  aside {
    @include media($large){
      @include span-columns(4);
    }
  }
  section{
    @include media($large){
      @include span-columns(8);
    }
    background: #ccc;
    margin: .5em 0;
    padding: 1em;
  }
  .pictures {
    li {
      @include media($large){
        @include span-columns(4);
        @include omega(3n);
      }
    }
  }
  .mini { max-width: 100%; }
}

SassMeister-output.css

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

button,
input[type="submit"] {
  border: 1px solid #2459a6;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 0 #89a8d5;
  color: white;
  display: inline-block;
  font-size: inherit;
  font-weight: bold;
  background-color: #477dca;
  background-image: -webkit-linear-gradient(#477dca, #2760b2);
  background-image: linear-gradient(#477dca, #2760b2);
  padding: 7px 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 #1b4f9a;
  background-clip: padding-box;
  font-size: 1em;
}
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 0 #628cc8;
  cursor: pointer;
  background-color: #3c71bb;
  background-image: -webkit-linear-gradient(#3c71bb, #255aa5);
  background-image: linear-gradient(#3c71bb, #255aa5);
}
button:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
  border: 1px solid #2459a6;
  box-shadow: inset 0 0 8px 4px #235397, inset 0 0 8px 4px #235397, 0 1px 1px 0 #eeeeee;
}
button:disabled,
input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body {
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  line-height: 1.25em;
  margin: 0;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.75em;
}

h4 {
  font-size: 1.5em;
}

h5 {
  font-size: 1.25em;
}

h6 {
  font-size: 1em;
}

p {
  margin: 0 0 0.75em;
}

a {
  color: #477dca;
  text-decoration: none;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  transition: color 0.1s linear;
}
a:hover {
  color: #2c5999;
}
a:active, a:focus {
  color: #2c5999;
  outline: none;
}

hr {
  border-bottom: 1px solid #dddddd;
  border-left: none;
  border-right: none;
  border-top: none;
  margin: 1.5em 0;
}

img {
  margin: 0;
  max-width: 100%;
}

abbr, acronym {
  border-bottom: 1px dotted #dddddd;
  cursor: help;
}

address {
  display: block;
  margin: 0 0 0.75em;
}

hgroup {
  margin-bottom: 0.75em;
}

del {
  color: #595959;
}

blockquote {
  border-left: 2px solid #dddddd;
  color: #595959;
  margin: 1.5em 0;
  padding-left: 0.75em;
}

cite {
  color: #737373;
  font-style: italic;
}
cite:before {
  content: '\2014 \00A0';
}

fieldset {
  background: #f7f7f7;
  border: 1px solid #dddddd;
  margin: 0 0 0.75em 0;
  padding: 1.5em;
}

input,
label,
select {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1em;
}

label {
  font-weight: bold;
  margin-bottom: 0.375em;
}
label.required:after {
  content: "*";
}
label abbr {
  display: none;
}

textarea,
input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: border-color;
  -moz-transition: border-color;
  transition: border-color;
  background-color: white;
  border-radius: 0.1875em;
  border: 1px solid #dddddd;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1em;
  margin-bottom: 0.75em;
  padding: 0.5em 0.5em;
  resize: vertical;
  width: 100%;
}
textarea:hover,
input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover {
  border-color: #c4c4c4;
}
textarea:focus,
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus {
  border-color: #477dca;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7);
  outline: none;
}

input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

input[type="checkbox"], input[type="radio"] {
  display: inline;
  margin-right: 0.375em;
}

input[type="file"] {
  width: 100%;
}

select {
  width: auto;
  margin-bottom: 1.5em;
}

button,
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  margin: 0.75em 0;
  table-layout: fixed;
  width: 100%;
}

th {
  border-bottom: 1px solid #b7b7b7;
  font-weight: bold;
  padding: 0.75em 0;
  text-align: left;
}

td {
  border-bottom: 1px solid #dddddd;
  padding: 0.75em 0;
}

tr, td, th {
  vertical-align: middle;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
dl {
  line-height: 1.5em;
  margin-bottom: 0.75em;
}
dl dt {
  font-weight: bold;
  margin-top: 0.75em;
}
dl dd {
  margin: 0;
}

.error, #flash_failure {
  background: #fbe3e4;
  color: #96151b;
  font-weight: bold;
  margin-bottom: 0.75em;
  padding: 0.75em;
}
.error a, #flash_failure a {
  color: #6a0f13;
}
.error a:hover, #flash_failure a:hover {
  color: #110203;
}

.notice, #flash_notice {
  background: #fff6bf;
  color: #8c7800;
  font-weight: bold;
  margin-bottom: 0.75em;
  padding: 0.75em;
}
.notice a, #flash_notice a {
  color: #594c00;
}
.notice a:hover, #flash_notice a:hover {
  color: black;
}

.success, #flash_success {
  background: #e6efc2;
  color: #56651a;
  font-weight: bold;
  margin-bottom: 0.75em;
  padding: 0.75em;
}
.success a, #flash_success a {
  color: #333c10;
}
.success a:hover, #flash_success a:hover {
  color: black;
}

.wrapper {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}
.wrapper:after {
  content: "";
  display: table;
  clear: both;
}
.wrapper header {
  background: #cccccc;
  margin: .5em 0;
  padding: 1em;
}
@media screen and (min-width: 800px) {
  .wrapper aside {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .wrapper aside:last-child {
    margin-right: 0;
  }
}
.wrapper section {
  background: #ccc;
  margin: .5em 0;
  padding: 1em;
}
@media screen and (min-width: 800px) {
  .wrapper section {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .wrapper section:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 800px) {
  .wrapper .pictures li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .wrapper .pictures li:last-child {
    margin-right: 0;
  }
  .wrapper .pictures li:nth-child(3n) {
    margin-right: 0;
  }
  .wrapper .pictures li:nth-child(3n+1) {
    clear: left;
  }
}
.wrapper .mini {
  max-width: 100%;
}

SassMeister-rendered.html

<div class="wrapper">
  <header>
    <h1>Header!</h1>
  </header>
  <aside>
    <p>Organic white strong doppio froth white redeye sugar medium single shot cultivar to go. Cup wings, decaffeinated robusta at saucer strong. Et, viennese strong aromatic a qui wings turkish single origin. Iced seasonal, grinder cultivar viennese steamed decaffeinated latte. Redeye so sugar bar cappuccino, cup acerbic, caramelization wings caffeine and espresso.</p>
<p>Saucer so, cortado flavour whipped aromatic variety aromatic. Con panna doppio blue mountain at plunger pot macchiato cup ristretto filter. Froth cream robust, viennese cappuccino mocha, whipped macchiato blue mountain beans froth. Mug rich doppio sit ristretto variety americano kopi-luwak. Aromatic half and half robust percolator roast caffeine con panna.</p>
  </aside>
  <section class="main">
    <ul class="pictures">
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
      <li><img class="mini" src="http://distilleryimage2.ak.instagram.com/e7ae4756588f11e2b20722000a1f97fa_7.jpg" /></li>
    </ul>
  </section>
</div>