Extending a %placeholder selector within a media query block without resulting to compile error.

extend-placehoder-media-query.css

.some-class {
  color: blue;
}

@media (max-width: 800px) {
  .some-class {
    color: red;
  }
}

extend-placehoder-media-query.scss

// ----
// Extending a %placeholder selector within a media query block without resulting to compile error.
//
// You may not @extend an outer selector from within @media.
// You may only @extend selectors within the same directive.
// From "@extend %icon" on line 8 of icons.scss
// 
// Based on the solution presented at: http://thesassway.com/intermediate/understanding-placeholder-selectors
// ----

%blue {
  color: blue;
}

.some-class {
  @extend %blue;
}

@media (max-width: 800px) {
  %red {
    color: red;
  }
  .some-class {
    @extend %red;
  }
}