Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="primary">
  <h1></h1>
  <h2>Primary container.</h2>
</div>
<div class="secondary">
  <h1>I am a sidebar.</h1>
  <h2>Secondary container</h2>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

@import url(http://fonts.googleapis.com/css?family=Roboto:700,100);

//	Media Queries using Sass List Maps 
//	Define our breakpoints in $breakpoints variable and assign key value pairs in ems. 
//	Em to px calculation varies based on the default font-size.

$breakpoints: (
  small: 30em,
  medium: 40em,
  large: 50em
);

@mixin wider-than($screen-size) {
	@if map-has-key($breakpoints, $screen-size) {
		@media (min-width: map-get($breakpoints, $screen-size)) {
			@content;
		}
	} @else {
		// Debugging - can be used thanks to map-has-key() instead of loop
		@warn "Breakpoint '#{$screen-size}' does not exist!"
	}
}

/* Color Variables */
$color-large: #F45D4C;
$color-medium: #F7A541;
$color-small: #FFC52C;
$color-primary: #B3CC57;

.primary,
.secondary {
  box-sizing: border-box;
  color: #fff;
  float: none;
  margin: 0 auto;
}

.primary {
  background-color: $color-primary;
  width: 100%;

  @include wider-than(small) {
    background-color: $color-small;
    float: left; /* default was no float. All sizes above will inherit this float */
    width: 55%;
  }

  @include wider-than(medium) {
    background-color: $color-medium;
    width: 65%;
  }

  @include wider-than(large) {
    background-color: $color-large;
    width: 75%;
  }
}

.secondary {
  background-color: #999;
  width: 100%;

  @include wider-than(small) {
    float: right;
    width: 45%;
  }

  @include wider-than(medium) {
    width: 35%;
  }

  @include wider-than(large) {
    width: 25%;
  }

  @include wider-than(made-up-size) {
    color: red;
    width: 15%;
  }
}

h1, h2 {
  font-family: 'roboto', sans-serif;
  font-size: 1em;
  font-weight: 100;
  line-height: 1;
  margin: 0;
  padding: 1em;
}

h1 {
  padding-bottom: 0;
}

.primary h1:before {
  content: "I am default, mobile first. ";
  font-weight: 700;

  @include wider-than(small) {
      content: "Wider than small. ";
  }

  @include wider-than(medium) {
      content:"Wider than medium. ";
  }

  @include wider-than(large) {
      content: "Wider than large. ";
  }
}

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Roboto:700,100);
/* Color Variables */
.primary,
.secondary {
  box-sizing: border-box;
  color: #fff;
  float: none;
  margin: 0 auto;
}

.primary {
  background-color: #B3CC57;
  width: 100%;
}
@media (min-width: 30em) {
  .primary {
    background-color: #FFC52C;
    float: left;
    /* default was no float. All sizes above will inherit this float */
    width: 55%;
  }
}
@media (min-width: 40em) {
  .primary {
    background-color: #F7A541;
    width: 65%;
  }
}
@media (min-width: 50em) {
  .primary {
    background-color: #F45D4C;
    width: 75%;
  }
}

.secondary {
  background-color: #999;
  width: 100%;
}
@media (min-width: 30em) {
  .secondary {
    float: right;
    width: 45%;
  }
}
@media (min-width: 40em) {
  .secondary {
    width: 35%;
  }
}
@media (min-width: 50em) {
  .secondary {
    width: 25%;
  }
}

h1, h2 {
  font-family: 'roboto', sans-serif;
  font-size: 1em;
  font-weight: 100;
  line-height: 1;
  margin: 0;
  padding: 1em;
}

h1 {
  padding-bottom: 0;
}

.primary h1:before {
  content: "I am default, mobile first. ";
  font-weight: 700;
}
@media (min-width: 30em) {
  .primary h1:before {
    content: "Wider than small. ";
  }
}
@media (min-width: 40em) {
  .primary h1:before {
    content: "Wider than medium. ";
  }
}
@media (min-width: 50em) {
  .primary h1:before {
    content: "Wider than large. ";
  }
}

SassMeister-rendered.html

<div class="primary">
  <h1></h1>
  <h2>Primary container.</h2>
</div>
<div class="secondary">
  <h1>I am a sidebar.</h1>
  <h2>Secondary container</h2>
</div>