Last active
October 6, 2015 07:48
-
-
Save interactivellama/2960590 to your computer and use it in GitHub Desktop.
Media Query Canary for Less.JS (Mobile First)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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';} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="media-query-canary"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment