Skip to content
PostCSS plugin that allows for defining custom variables to represent media queries
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cases
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
index.js
npm-shrinkwrap.json
package.json
tests.js

README.md

PostCSS Variable Media

Build Status codecov npm version

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;
	}
}
You can’t perform that action at this time.