postcss-easy-media-query
Postcss plugin for easily create media queries. Inspired by Rupture syntax.
The plugin exposes the following media query at-rules:
@above
@from-width
(min inclusive)@below
@to-width
(max inclusive)@between
@between-from
(min inclusive)@between-to
(max inclusive)
And @breakpoint
for defining a breakpoint.
Examples
@/* @media screen and (min-width: 769px) {} */ @/* @media screen and (min-width: 768px) {} */ @/* @media screen and (max-width: 399px) {} */ @/* @media screen and (max-width: 400px) {} */ @/* @media screen and (min-width: 401px) and (max-width: 767px) {} */ @/* @media screen and (min-width: 400px) and (max-width: 767px) {} */ @/* @media screen and (min-width: 400px) and (max-width: 768px) {} */
@@/* @media screen and (min-width: 768px) */@} /* @media screen and (min-width: 400px) and (max-width: 767px) */@}
installation
npm install postcss-easy-media-query --save-dev
tests
npm install && npm test
usage
var postcss = var easyMediaQuery =
options
breakpoints: Object
Set the default breakpoints:
Then you can use the defined breakpoints in your CSS:
@ @
license
MIT