README
@else lets you use @else
inverted media queries in CSS.
/* before */
@media (min-width: 30em) {
body {
background-color: blue;
}
} @else {
body {
background-color: yellow;
}
}
/* after */
@media (min-width: 30em) {
body {
background-color: blue;
}
} @media (max-width: 29.999em) {
body {
background-color: yellow;
}
}
Usage
Add @else to your build tool:
npm install postcss-at-else --save-dev
Node
require('postcss-at-else').process(YOUR_CSS, { /* options */ });
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load @else as a PostCSS plugin:
postcss([
require('postcss-at-else')({ /* options */ })
]).process(YOUR_CSS, /* options */);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable @else within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-at-else')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable @else within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-at-else')({ /* options */ })
]
},
dist: {
src: '*.css'
}
}
});