gistfile1.scss

// We're going to use Breakpoint to handle our media queries
// http://github.com/team-sass/breakpoint
@import "breakpoint";

@mixin element-query($sizes...) {
  @each $size in $sizes {
    @include breakpoint(nth($size, 2)) {
      #{nth($size, 1)} & {
        @content;
      }
    }
  }
}

.schedule-component {
  @include element-query('.content' 32.5em, 'aside' 90em) {
    ...styles here...
  }
}

// I'll add this to https://github.com/Team-Sass/toolkit if you think it'll be useful

Element Query mixin as proposed by Filament Group

Thanks, this looks really great, we'll take a look. Does this work with min- and max- width media queries?

Will work with any media queries you can pass to Breakpoint (which is any media query)

Also, because it's using Breakpoint, you can do some really crazy media queries and have them live inside of variables. Take, for example, the following (assuming the above):

$bar-query: (max-width 35em) (orientation landscape);
$qux-query: 30em (height 20em 40em), screen monochrome;
$waldo-query: handheld;

.foo {
    @include element-query( '.bar' $bar-query, '.qux' $qux-query, '.waldo' $waldo-query ) {
        content: 'Baz';
    }
}

That will produce the following CSS:

@media (max-width: 35em) and (orientation: landscape) {
  .bar .foo {
    content: 'Baz';
  }
}
@media (min-width: 30em) and (min-height: 20em) and (max-height: 40em), screen and (monochrome) {
  .qux .foo {
    content: 'Baz';
  }
}
@media handheld {
  .waldo .foo {
    content: 'Baz';
  }
}

Hey @Snugug. Thanks for the example.

Part of our problem is that for each shared breakpoint, there are many selectors and styles that need to apply, rather than just one set of styles for a given selector.

I added more detail here if you're able to chime in. Thanks so much!