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