A CodePen by Bermon Painter. @content directive

index.html

<h1>@content directive</h1>
<p>We can take our media queries a step farther and create a mixin out of them. The @content directive in Sass allows you to pass entire sections of CSS rules back through a mixin.</p>

<article role="main">
  Main content
</article>

<aside role="complementary">
  Secondary content
</aside>

style.scss

@import "compass";
h1 {
  font-size: 20px;
}

article, aside {
  background-color: #ccc;
  margin-bottom: 20px;
  min-height: 80px;
}

$small-breakpoint: 480px;
$medium-breakpoint: 768px;
$large-breakpoint: 960px;

@mixin respond-to($name){
  @if $name == small-screen {
    @media only screen and (min-width: $small-breakpoint) {
      @content
    }
  }
  @if $name == medium-screen {
    @media only screen and (min-width: $medium-breakpoint) {
      @content

    }
  }
  @if $name == large-screen {
    @media only screen and (min-width: $large-breakpoint) {
      @content

    }
  }
}

article {
  width: 100%;
  @include respond-to(small-screen) {
		  background-color: #999;
    float: left;
    width: 70%;
  }
  @include respond-to(medium-screen) {
		  background-color: #666;
    width: 60%;
  }
  @include respond-to(large-screen) {
		  background-color: #333;
    width: 48%;
  }
}

aside {
  width: 100%;
  @include respond-to(small-screen) {
		  background-color: #999;
    float: right;
    width: 25%;
  }
  @include respond-to(medium-screen) {
		  background-color: #666;
    width: 35%;
  }
  @include respond-to(large-screen) {
		  background-color: #333;
    width: 48%;
  }
}