postcss-responsive-properties

PostCSS Responsive Properties

PostCSS plugin that will make writing responsive style more easily.

Input:

body {
  color: red;
  font-size: {
    0: 1em;
    $tablet: 1.5em; /* use it with variables */
    1600: 2em;
  }
}

Output:

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;
  }
}

Usage

Install postcss and postcss-responsive-properties to your project:

npm i postcss postcss-responsive-properties --save

Using with PostCSS:

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);
});

Using with gulp:

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.