Extending placeholder selectors within media queries

readme.md

Extending placeholder selectors within @media queries

By blackfalcon

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 Sass Meister for providing the test bed.

The following 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.

input.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;
}

output.css

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

funny issue I faced and it seems you have too is that you can't have just a media query inside of a placeholder. If you removed color: blue; on line 2 of input.scss none of the @extend calls would work.