Placeholder Selectors, Mixins and Media Queries: oh my!

base.scss

/* THE BASE FILE WHERE YOU IMPORT ALL YOUR STUFF & MAYBE DO YOUR MEDIA QUERIES */

@import "mixins";

@media only screen and (min-width: 40.625em) {
	@import "lib/placeholders";
	@import "layout/medium";
}

medium.scss

/* THE STYLES FOR "MEDIUM" SIZED SCREENS (AS DEFINED IN BASE.SCSS) */

.this-thing {
  @extend %thingie;
}

.this-other-thing {
  @extend %alternate-thingie;
}

mixins.scss

/* A PLACE TO DEFINE YOUR "BASE/ORIGINAL" MIXINS */

@mixin divider-bottom {
	padding-bottom: 1em;
	border-bottom: 1px solid $border-color;
	margin-bottom: 1em;
}

placeholders.scss

/* PLACEHOLDER SELECTORS. */

%thingie {
	background: red;
	font-size: 1.25em;
	width: 10%;
	display: block;
}

%alternate-thingie {
	@include divider-bottom;
}

screen.css

/* THE FINAL, COMPILED CSS */

@media only screen and (min-width: 40.625em) {
  .this-thing {
    background: red;
    font-size: 1.25em;
    width: 10%;
    display: block;
  }

  .this-other-thing {
    padding-bottom: 1em;
    border-bottom: 1px solid #dededb;
    margin-bottom: 1em;
  }
}

This works, but is not ideal. Things get very inefficiently grouped inside of the media query files, which leads to code bloat.