Use Sass-like markup in your CSS
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
test Update dependencies Oct 2, 2018
.appveyor.yml Update plugin organization Jun 29, 2017
.editorconfig Update plugin organization Jun 29, 2017
.gitignore 3.0.0 Jan 17, 2018
.rollup.js 3.0.0 Jan 17, 2018
.tape.js Use PostCSS Preset Env Jan 22, 2018
.travis.yml .travis.yml - Node 4 Jun 29, 2017
CHANGELOG.md 3.1.2 Feb 28, 2018
CONTRIBUTING.md 3.0.0 Jan 17, 2018
LICENSE.md 3.0.0 Jan 17, 2018
README.md Add list of plugins to readme Feb 18, 2018
index.js 3.0.0 Jan 17, 2018
package.json Update dependencies Oct 2, 2018

README.md

PreCSS PostCSS Logo

NPM Version Linux Build Status Windows Build Status Gitter Chat

PreCSS lets you use Sass-like markup and staged CSS features in CSS.

$blue: #056ef0;
$column: 200px;

.menu {
  width: calc(4 * $column);
}

.menu_link {
  background: color-mod($blue alpha(90%));
  width: $column;
}

/* after */

.menu {
  width: calc(4 * 200px);
}

.menu_link {
  background: #056ef0;
  width: 200px;
}

PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like color functions, logical and custom properties, media query ranges, and image sets.

Usage

Add PreCSS to your build tool:

npm install precss --save-dev

Node

Use PreCSS to process your CSS:

import precss from 'precss';

precss.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PreCSS as a plugin:

import postcss from 'postcss';
import precss from 'precss';

postcss([
  precss(/* options */)
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PreCSS in your Gulpfile:

import postcss from 'gulp-postcss';
import precss from 'precss';

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

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PreCSS in your Gruntfile:

import precss from 'precss';

grunt.loadNpmTasks('grunt-postcss');

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

Plugins

PreCSS is powered by the following plugins (in this order):