Extending placeholder selectors within media queries

01_SassMeister.sass

%myclass
    color: blue
    @media (min-width: 600px)
        background: red
    @media (min-width: 800px)
        font-size: 28px

.class1
    @media (min-width: 600px)
        @extend %myclass

.class2
    @media (min-width: 800px)
        @extend %myclass

.class3
    @extend %myclass 

02_SassMeister.css

.class3 {
  color: blue;
}
@media (min-width: 600px) {
  .class1, .class3 {
    background: red;
  }
}
@media (min-width: 800px) {
  .class2, .class3 {
    font-size: 28px;
  }
}

placeholder_selectors_media_queries.md

Recent updates to Sass 3.2.3 has me thinking. And thanks to @micahgodbolt and @ScottKellum, I think we got to the bottom of this. Special thanks to @sassmeisterapp for providing the test bed.

This example illustrates how a placeholder selector can be extended within a media query, functionality that previously threw an error in Sass. In the previous versions of Sass, the extended rule needed to be in direct context with the media query. The functionality that this example illustrates is that if there is a common media query between the new rule and the extended placeholder, this relationship will inherit.

The SCSS

%myclass
    color: blue
    @media (min-width: 600px)
        background: red
    @media (min-width: 800px)
        font-size: 28px

.class1
    @media (min-width: 600px)
        @extend %myclass

.class2
    @media (min-width: 800px)
        @extend %myclass

.class3
    @extend %myclass 

The CSS

.class3 {
  color: blue;
}
@media (min-width: 600px) {
  .class1, .class3 {
    background: red;
  }
}
@media (min-width: 800px) {
  .class2, .class3 {
    font-size: 28px;
  }
}

The code listed here is still in error. Since %myclass defines styles outside of @media (min-width: 600px), you may not extend %myclass within @media (min-width: 600px) since those styles can't be added in the proper scope.

The change in Sass 3.2.3 just ensures that the two following snippets are equivalent:

@media (min-width: 800px)
  .class
    @extend %myclass

.class
  @media (min-width: 800px)
    @extend %myclass

Neither of these is valid if %myclass defines styles outside of @media (min-width: 800px).