Media Query Canary for Less.JS (Mobile First)

media-query-canary.less

/* I like to know what the last media query to be applied is, especially 
in areas that overlap or are close to the edge of the media query width. 
This gets even more confusing when using a dynamic language like Less.JS 
which doesn't allow browser debuggers to see the original source code. 
My approach is to group CSS rules in such a way that limit the cascade 
(at least in the original Less file). This should help in debugging. */

/* Variables for Media Query Canary */
@tablet: ~"screen and (min-width: 600px)";
@desktop: ~"screen and (min-width: 992px)";
@desktopWide: ~"screen and (min-width: 1382px)";


/* Shows what media query is the last media query applied in the browser. 
Yes, the media queries overlap/overwrite, so only the last will be displayed. */

.media-query-canary {
	position: absolute;
	top: 0;
	right: 0;

	&:after {
	content:'No MQ'; 
	background-color:yellow;
	
	}

	@media @tablet {
		&:after {content:'tablet';}
	}
	@media @desktop {
		&:after {content:'desktop';}
	}
	@media @desktopWide {
		&:after {content:'desktopWide';}
	}

}

test.html

<div class="media-query-canary"></div>