A CodePen by Bermon Painter. Media Queries

index.html

<h1>Media Queries</h1>
<p>One of the nice things that Sass will let you do with media queries is nest them. This helps keep like sections of CSS chunked together and easier to maintain.</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: 1024px;

article {
  width: 100%;
	 @media screen and (min-width: $small-breakpoint) {
    background-color: #999;
    float: left;
    width: 70%;
  }
  @media screen and (min-width: $medium-breakpoint) {
    background-color: #666;
    width: 60%;
  }
  @media screen and (min-width: $large-breakpoint) {
    background-color: #333;
    width: 48%;
  }
}

aside {
  width: 100%;
	 @media screen and (min-width: $small-breakpoint) {
    background-color: #999;
    float: right;
    width: 25%;
  }
  @media screen and (min-width: $medium-breakpoint) {
    background-color: #666;
    width: 35%;
  }
  @media screen and (min-width: $large-breakpoint) {
    background-color: #333;
    width: 48%;
  }
}