Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <section class="content">
    <div class="story">
      <header>
        <h1>What up</h1>
      </header>
      <div class="prose">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.
      </div>
    </div>
  </section>
  <aside class="sidebar">
    <ul>
      <li>Hi</li>
      <li>what</li>
      <li>go away</li>
    </ul>
  </aside>
</div>

SassMeister-input.scss

// ----
// libsass (v2.0.0)
// ----

html {
  box-sizing: border-box;
}

* {
  &,
  &:before,
  &:after {
    box-sizing: inherit;
  }
}

h1 {
  margin-top: 0;
}

$em-base: 16px !default;
$grid-columns: 12 !default;

@function em($pxval, $base: $em-base) {
  @if unitless($pxval) {
    $pxval: $pxval * 1px
  }

  @if unitless($base) {
    $base: $base * 1px;
  }

  @return ($pxval / $base) * 1em;
}

$gutter: em(20) !default;
$max-width: em(1200) !default;

@mixin container($local-max-width: $max-width) {
  @include clearfix;
  max-width: $local-max-width;

  margin: {
    left: auto;
    right: auto;
  }
}

@mixin clearfix {
  &:after {
    clear: both;
    content: '';
    display: table;
  }
}


@mixin columns($columns, $container-columns: $grid-columns) {
  display: block;
  float: left;
  padding-right: $gutter;
  width: ($columns / $container-columns) * 100%;

  &:last-child {
    padding-right: 0;
  }
}

.container {
  background-color: green;
  @include container;
}

.content {
  @include columns(10);
}

.story {
  background-color: lighten(grey, 30%);
  padding: $gutter;
}

.sidebar {
  background-color: red;
  @include columns(2);
}

SassMeister-output.css

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

h1 {
  margin-top: 0; }

.container {
  background-color: green;
  max-width: 75em;
  margin-left: auto;
  margin-right: auto; }
  .container:after {
    clear: both;
    content: '';
    display: table; }

.content {
  display: block;
  float: left;
  padding-right: 1.25em;
  width: 83.33333%; }
  .content:last-child {
    padding-right: 0; }

.story {
  background-color: #cccccc;
  padding: 1.25em; }

.sidebar {
  background-color: red;
  display: block;
  float: left;
  padding-right: 1.25em;
  width: 16.66667%; }
  .sidebar:last-child {
    padding-right: 0; }

SassMeister-rendered.html

<div class="container">
  <section class="content">
    <div class="story">
      <header>
        <h1>What up</h1>
      </header>
      <div class="prose">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.
      </div>
    </div>
  </section>
  <aside class="sidebar">
    <ul>
      <li>Hi</li>
      <li>what</li>
      <li>go away</li>
    </ul>
  </aside>
</div>