Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="primary">
  Resize me. Primary container.
</div>
<div class="secondary">
  I am a sidebar.
</div>

SassMeister-input.scss

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

//	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: (
  large: 71.25em, 
  medium: 48em,
  small: 30em
);

@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!"
	}
}

.primary,
.secondary {
  box-sizing: border-box;
  color: #fff;
  float: none;
  padding: 1em;
}

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

  @include wider-than(small) {
    background-color: yellow;
    float: left;
    width: 55%;
  }
  @include wider-than(medium) {
    background-color: orange;
    width: 65%;
  }
  @include wider-than(large) {
    background-color: red;
    width: 75%;
  }
}
.secondary {
  background-color: #999;
  width: 100%;
    @include wider-than(small) {
      float: left;
      width: 45%;
    }
    @include wider-than(medium) {
      width: 35%;
    }
    @include wider-than(large) {
      width: 25%;
    }
}

SassMeister-output.css

.primary,
.secondary {
  box-sizing: border-box;
  color: #fff;
  float: none;
  padding: 1em;
}

.primary {
  background-color: green;
  width: 100%;
}
@media (min-width: 30em) {
  .primary {
    background-color: yellow;
    float: left;
    width: 55%;
  }
}
@media (min-width: 48em) {
  .primary {
    background-color: orange;
    width: 65%;
  }
}
@media (min-width: 71.25em) {
  .primary {
    background-color: red;
    width: 75%;
  }
}

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

SassMeister-rendered.html

<div class="primary">
  Resize me. Primary container.
</div>
<div class="secondary">
  I am a sidebar.
</div>