Silvestr-b / postcss-mq

PostCSS MQ

PostCSS plugin Make Media-Queries very easy to use. Try it!.

From:

.block {
    color: red; 
	margin: s(4px), m(8px) 
}

To:

.block {
  	color: red 
}
@media (min-width: 320px){
  	.block {
  	  	margin: 4px 
  	} 
}
@media (min-width: 460px){
  	.block {
  	  	margin: 8px 
  	} 
}

Usage

const options = {
	sizes: {
		xxs: '(min-width: 320px)', 
		xs: '(min-width: 460px)',
		// ...[s,m,l,xl,xxl]
	}
}

postcss([ require('postcss-mq')(options) ])

See PostCSS docs for examples for your environment.