Use media() to assign responsive values to a property
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.editorconfig
.gitignore
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE.md
README.md
example.js
index.js
package.json

README.md

Media() PostCSS Logo

CSS Standard Status NPM Version Build Status Licensing Gitter Chat

Media() lets you use the media() function to assign responsive values to a declaration, following the CSS Media Expressions specification.

/* before */

h1 {
  font-size: media(
    16px,
    (min-width:  600px) 20px,
    (min-width: 1000px) 40px,
    (min-width: 1400px) 60px
  );
}


/* after */

h1 {
  font-size: 16px;
}

@media (min-width: 600px) {
  h1 {
    font-size: 20px;
  }
}

@media (min-width: 1000px) {
  h1 {
    font-size: 40px;
  }
}

@media (min-width: 1400px) {
  h1 {
    font-size: 60px;
  }
}

Usage

Add Media() to your build tool:

npm install postcss-media-fn --save-dev

Node

require('postcss-media-fn').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Media() as a PostCSS plugin:

postcss([
  require('postcss-media-fn')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Media() within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      require('postcss-media-fn')({ /* options */ })
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Media() within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('postcss-media-fn')({ /* options */ })
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});