Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="story"></div>
  <div class="sidebar"></div>
</div>

SassMeister-input.scss

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

html {
  box-sizing: border-box;
}

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

// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/



$em-base: 16px;

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

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

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

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

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

@mixin media($query:$feature $value) {
  $loop-to: length($query);
  $media-query: 'screen and ';
  $i: 1;

  @while $i <= $loop-to {
    $media-query: $media-query + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
    @if ($i + 1) != $loop-to {
      $media-query: $media-query + 'and ';
    }
    $i: $i + 2;
  }

  @media #{$media-query} {
    @content;
  }
}


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

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


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

.container {
  @include container;
}

.story {
  background-color: red;
  height: 50px;
  @include media(min-width em(500)) {
    @include columns(8);
  }
}

.sidebar {
  background-color: blue;
  height: 50px;
  @include media(min-width em(500)) {
    @include columns(4);
  }
}

SassMeister-output.css

html {
  box-sizing: border-box; }

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

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

.story {
  background-color: red;
  height: 50px; }
  @media screen and (min-width: 31.25em)  {
    .story {
      display: block;
      float: left;
      padding-right: 1.25em;
      width: 66.66667%; }
      .story:last-child {
        margin-right: 0; } }

.sidebar {
  background-color: blue;
  height: 50px; }
  @media screen and (min-width: 31.25em)  {
    .sidebar {
      display: block;
      float: left;
      padding-right: 1.25em;
      width: 33.33333%; }
      .sidebar:last-child {
        margin-right: 0; } }

SassMeister-rendered.html

<div class="container">
  <div class="story"></div>
  <div class="sidebar"></div>
</div>