Skip to content

Instantly share code, notes, and snippets.

@daneden
Created November 7, 2012 16:20
Show Gist options
  • Save daneden/4032573 to your computer and use it in GitHub Desktop.
Save daneden/4032573 to your computer and use it in GitHub Desktop.
Sass media queries and @extend
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment