Sass media queries and @extend

gistfile1.sass

// Fairly safe way to visually hide content, but make it accessible to screen readers
.visually-hidden {
  position: absolute;
  left: -9999px;
  height: 1px;
}

@media screen and (max-width: 700px) {
  // Again, accessible to screen readers
  // Example: <a href="/login" class="icon icon-twitter"><span class="mobile-offscreen">Single-click </span> log in with Twitter</a>
  .mobile-offscreen {
    @extend .visually-hidden;
  }
}


// Extends actually add your `.mobile-offscreen` class to `.visually-hidden` like this:
/*
  .visually-hidden, .visually-hidden {
    position: absolute;
    left: -9999px;
    height: 1px;
  }
*/

// Leaving "nothing" in your media query.
// What you need is a mixin that duplicates `.visually-hidden` content into your media query
// It is not quite a Sass/SCSS bug. Stylus’ (and most likely Less (not tested)) extend works the same way.