PostCSS Variable Media

PostCSS plugin that allows for defining custom at-rules to represent media queries

/* before */
@tablet {
	.selection {
		background: #fff;
	}
}
@desktop {
	.selection {
		background: #000;
	}
}

/* after */
@media (min-width: 768px) {
	.selection {
		background: #fff;
	}
}
@media (min-width: 1024px) {
	.selection {
		background: #000;
	}
}

Usage

postcss([ require('postcss-variable-media') ])

See PostCSS docs for examples for your environment.

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load PostCSS Variables as a PostCSS plugin:

postcss([
	require('postcss-variables')({ /* options */ })
]);

Options

breakpoints

Type: Object
Default: {}

Specifies breakpoint variables and pixel min-width values.

require('postcss-variable-media')({
	breakpoints: {
		tablet: 768,
		desktop: 1024
	}
});

consolidate

Type: boolean
Default: true

Merge repeated breakpoint declarations and append to end of document. If set to false, breakpoints will be converted to media queries in place.

Note: If needing to consolidate across multiple stylesheets, refer to css-mqpacker.

require('postcss-variable-media')({
	breakpoints: {
		tablet: 768
	},
	consolidate: true
});

@tablet {
    .block1 {
		background: #fff;
	}
}
@tablet {
	.block2 {
		font-size: 14px;
	}
}

@media (min-width: 768px) {
	.block1 {
		background: #fff;
	}
	.block2 {
		font-size: 14px;
	}
}