Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="news">NEWS</div>
  <div class="content">CONTENT</div>
</div>
<br />
<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.1)
// ----

@import "compass";
@import 'breakpoint';
@import 'singularitygs';

@mixin thegrid($cols, $thegutter: .3){

  @include layout($cols, $thegutter) {

    @for $i from 1 through $cols {
        @if $i == 1 {
          &:nth-child(#{$cols}n+#{$i}) {
            @include isolation-span(1, $i, 'left');
          }
        }
        @else if $i < $cols {
          &:nth-child(#{$cols}n+#{$i}) {
            @include isolation-span(1, $i, 'none');
          }
        }
        @else {
          &:nth-child(#{$cols}n+#{$i}) {
            @include isolation-span(1, $i, 'right');
          }
        }
    }
  }
}

* {
  @include box-sizing('border-box');
}

@include add-grid(4);

$mediumBreakpoint: 800px;

.container{
  background: #cdcdcd;
  max-width: $mediumBreakpoint;
  margin: 0 auto;
  @include clearfix();
}

.news{
  background: red;
}
.content{
  background: green;
}

.item{
  background: #efefef;
}


@include breakpoint($mediumBreakpoint){
  .news{
    @include float-span(1);
    background: red;
  }
  .content{
    @include float-span(3, last);
    background: green;
  }
  
  .item{
    height: 2em;
    background-color:red;
    @include thegrid(5);
    margin-bottom:.5em;
  }
}

SassMeister-output.css

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

.container {
  background: #cdcdcd;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}

.news {
  background: red;
}

.content {
  background: green;
}

.item {
  background: #efefef;
}

@media (min-width: 800px) {
  .news {
    width: 21.05263%;
    clear: right;
    float: left;
    margin-left: 0;
    margin-right: 5.26316%;
    background: red;
  }

  .content {
    width: 73.68421%;
    clear: right;
    float: right;
    margin-right: 0;
    background: green;
  }

  .item {
    height: 2em;
    background-color: red;
    margin-bottom: .5em;
  }
  .item:nth-child(5n+1) {
    width: 16.12903%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: "left";
  }
  .item:nth-child(5n+2) {
    width: 16.12903%;
    float: left;
    margin-right: -100%;
    margin-left: 20.96774%;
    clear: "none";
  }
  .item:nth-child(5n+3) {
    width: 16.12903%;
    float: left;
    margin-right: -100%;
    margin-left: 41.93548%;
    clear: "none";
  }
  .item:nth-child(5n+4) {
    width: 16.12903%;
    float: left;
    margin-right: -100%;
    margin-left: 62.90323%;
    clear: "none";
  }
  .item:nth-child(5n+5) {
    width: 16.12903%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: "right";
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="news">NEWS</div>
  <div class="content">CONTENT</div>
</div>
<br />
<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
</div>