Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mixin for media queries with .no-mq fallback (for <IE9)
@sml-bp: 480px;
@med-bp: 720px;
@lrg-bp: 970px;
.phablet(@rules) {
@media screen and (min-width: @sml-bp) {
@rules();
}
};
.tablet(@rules) {
@media screen and (min-width: @med-bp) {
@rules();
}
};
.desktop(@rules) {
@media screen and (min-width: @lrg-bp) {
@rules();
}
.no-mq & {
@rules();
}
};
body {
background: black;
}
.phablet ({
body {
background: blue;
}
});
.tablet({
body {
background: red;
}
});
.desktop ({
body {
background: yellow;
}
});
.my-class {
color: #FFF;
.tablet({
color: #000;
});
.desktop({
color: red;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment