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

@above 768px {}
/* @media screen and (min-width: 769px) {} */

@from-width 768px {}
/* @media screen and (min-width: 768px) {} */

@below 400px {}
/* @media screen and (max-width: 399px) {} */

@to-width 400px {}
/* @media screen and (max-width: 400px) {} */

@between 400px 768px {}
/* @media screen and (min-width: 401px) and (max-width: 767px) {} */

@between-from 400px 768px {}
/* @media screen and (min-width: 400px) and (max-width: 767px) {} */

@between-to 400px 768px {}
/* @media screen and (min-width: 400px) and (max-width: 768px) {} */

@breakpoint md 768px;
@breakpoint sm 400px;

/* @media screen and (min-width: 768px) */
@from-width md {
  .text {
    font-size: 2em;
  }
}

/* @media screen and (min-width: 400px) and (max-width: 767px) */
@between-from sm md {
  .text {
    font-size: 1.3em
  }
}

installation

npm install postcss-easy-media-query --save-dev

tests

npm install && npm test

usage

var postcss = require('postcss')
var easyMediaQuery = require('postcss-easy-media-query')

postcss([easyMediaQuery()])

options

breakpoints: Object

Set the default breakpoints:

postcss([easyMediaQuery({
  breakpoints: {
    tablet: '800px',
    mobile: '600px'
  }
})])

Then you can use the defined breakpoints in your CSS:

@above tablet {
  /* ... */
}

@between mobile tablet {
  /* ... */
}

license

MIT