Element query workaround

gistfile1.scss

@mixin elementquery() {

    @media (min-width: 32.5em) { .content & { @content; } }
    @media (min-width: 90em) { .aside & { @content; } }

}


.schedule-component {

  @include elementquery() {
    color: pink;
  }

}


// Output:

@media (min-width: 32.5em) {
  .content .schedule-component {
    color: pink;
  }
}
@media (min-width: 90em) {
  .aside .schedule-component {
    color: pink;
  }
}

This looks nice, but is there a way to pass pairs of parent selectors and media queries as arguments into the elementquery mixin instead of looking for that & parent?

Our problem is that we have many blocks of selectors and styles that must apply at a given breakpoint, rather than just minor style adjustments to one element.

So, it's less like.. .schedule-component { color: pink; }, and more like...

.schedule-component { color: pink; } 
.schedule-component a { display: block; }
.schedule-component ul, .schedule-component li { ... }
...more here

Our article example was admittedly simplistic. In reality, this is the sort of output we'd need to achieve:

@media (min-width: 32.5em) {
    .content .schedule-component {
        float: left; 
        width: 100%;
        position:relative; 
    }
    .content .schedule-component ul,
    .content .schedule-component li {
       list-style: none;
       position: absolute;
       margin: 0;
       padding: 0;
    }
...more
}

@media (min-width: 90em) {
    aside .schedule-component {
        float: left; 
        width: 100%;
        position:relative; 
    }
    aside .schedule-component ul,
    aside .schedule-component li {
       list-style: none;
       position: absolute;
       margin: 0;
       padding: 0;
    }
...more
}

This is why we were hoping something like this was possible, as it'd be pretty concise and allow us to write the styles one time, inline in the same file.

@include elementquery( 
    {
        ".content": "(min-width: 32.5em)", 
        "aside":    "(min-width: 90em)"
    } ) {
    /* styles for this common layout breakpoint go here */
    .schedule-component {
        ...styles here...
    }
}

The syntax of how the parent selector and breakpoints are passed-in is less important than the ability to include a large block of styles and have them included within separate media queries with all selectors prefixed.

Any thoughts on that feasibility?

Why would the aside .schedule-component need to be in it's own media query? At lower than 90em does it need to be the full version of the schedule?

Now I see what you mean by passing multiple values through. Check out https://gist.github.com/micahgodbolt/5851228