Really simple media queries in LESS
来自: https://github.com/ApatheticG/breakpoint-less
breakpoint-less
Really simple media queries in LESS
Table of contents
- Usage
- Single value
- Two values
- Property and value pair
- Several media rules
- Type keywords
- Vendor prefixes
- Media queries concatenation
This simple mixin does almost everything, that it'sinspirer can. Quote:
Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin.
There are two major differences between this library and breakpoint-sass. First, it doesn't (and, in my humble opinion, shouldn't) take care of vendor prefixes. Second, there is no way to get context as describedhere.
Usage
First, include the main _breakpoint.less file like this:
@import "lib/_breakpoint";
Second, use it!
Single value
.test1 { .breakpoint(450px, { color: #fff; }); }
@media only screen and (min-width: 450px) { .test1 { color: #fff; } }
Two values
.test2 { .breakpoint("450px 500px", { color: #fff; }); }
@media only screen and (min-width: 450px) and (min-height: 500px) { .test2 { color: #fff; } }
Property and value pair
.test3 { .breakpoint("max-width 1000px", { color: #fff; }); }
@media only screen and (max-width: 1000px) { .test3 { color: #fff; } }
Several media rules
.test4 { .breakpoint("(min-height 1000px) (orientation portrait)", { color: #fff; }); }
@media only screen and (min-height: 1000px) and (orientation: portrait) { .test4 { color: #fff; } }
Type keywords
.test6 { .breakpoint(300px, "not print", { color: #fff; }); } .test7 { .breakpoint(300px, "all", { color: #fff; }); }
@media not print and (min-width: 300px) { .test6 { color: #fff; } } @media only all and (min-width: 300px) { .test7 { color: #fff; } }
You can see other examples in thetest file.
Vendor prefixes
Breakpoint-less doesn't worry about cross-browser compatibility. Neither should you. Who should, you might ask?Autoprefixer.
.test9 { .breakpoint("min-resolution 3dppx", { color: #fff; }); }
/* Without autoprefixer */ @media only screen and (min-resolution: 3dppx) { .test9 { color: #fff; } } /* With autoprefixer */ @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 3dppx) { .test9 { color: #fff; } }
Media queries concatenation
LESS (just as SASS) has absolutely no internal way to combine media queries. Sorry, just no. But with the power of another PostCSS library -CSS MQPacker - mission becomes possible:
.test10 { .breakpoint(300px, { color: #fff; }); } .test11 { .breakpoint(300px, { color: #fff; }); }
@media only screen and (min-width: 300px) { .test10 { color: #fff } .test11 { color: #fff } }