Welches Stylesheet greift denn nun?

Das Framework Foundation hat mehrere Breakpoints für Responsive Websites. Vielleicht wissen manche Frontend-Entwickler immer sofort, in welchem Abschnitt (zwischen welchen Breakpoints) sie sich nun befinden. Mir fällt es manchmal schwer, das auf den ersten Blick zu erkennen – ist das schon large oder noch medium. Und so habe ich ein CSS-Schnipsel, das ohne den Code der Seite zu verändern in der oberen Ecke anzeigt, in welche Kategorie die aktuelle Auflösung eingeordnet wird.

body:after {
	content: "other";
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	border: 1px solid silver;
	color: silver;
	z-index: 100;
	padding: 10px;
}
@media #{$large-only} {
	body:after {
		content: "large";
	}
}
@media #{$medium-only} {
	body:after {
		content: "medium";
	}
}
@media #{$small-only} {
	body:after {
		content: "small";
	}
}