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 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</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';

* {
  @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{
    
    @include layout(3){
      @include float-span(1);
      background: #efefef;
    
      &:nth-child(3n + 3){
        @include float-span(1, last);
      }
    }
  }
}

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 {
    width: 28.57143%;
    clear: right;
    float: left;
    margin-left: 0;
    margin-right: 7.14286%;
    background: #efefef;
  }
  .item:nth-child(3n + 3) {
    width: 28.57143%;
    clear: right;
    float: right;
    margin-right: 0;
  }
}

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 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
</div>