PostCSS plugin that will make writing responsive style more easily.
body {
color: red;
font-size: {
0: 1em;
$tablet: 1.5em; /* use it with variables */
1600: 2em;
}
}body {
color: red;
font-size: 1em
}
@media screen and (min-width: $tablet) { /* use it with variables */
body {
font-size: 1.5em;
}
}
@media screen and (min-width: 1600px) {
body {
font-size: 2em;
}
}Install postcss and postcss-responsive-properties to your project:
npm i postcss postcss-responsive-properties --save
var postcss = require("postcss"),
responsiveCSSProperties = require("postcss-responsive-properties");
postcss([ responsiveCSSProperties ])
.process(css, { from: "src/input.css", to: "dist/output.css" })
.then(function (result) {
fs.writeFileSync("dist/output.css", result.css);
if ( result.map ) fs.writeFileSync("dist/output.css.map", result.map);
});npm i gulp gulp-postcss postcss-responsive-properties --save
var gulp = require("gulp"),
postcss = require("gulp-postcss"),
responsiveCSSProperties = require("postcss-responsive-properties");
gulp.task("styles", function() {
var processors = [ responsiveCSSProperties ];
return gulp.src("src/input.css")
.pipe(postcss(processors).on("error", function(err) { console.log(err)}))
.pipe(gulp.dest("dist/output.css"));
});See PostCSS docs for examples for your environment.
