PreCSS

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

1$blue: #056ef0;
2$column: 200px;
3
4.menu {
5  width: calc(4 * $column);
6}
7
8.menu_link {
9  background: $blue;
10  width: $column;
11}
12
13/* becomes */
14
15.menu {
16  width: calc(4 * 200px);
17}
18
19.menu_link {
20  background: #056ef0;
21  width: 200px;
22}

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

Usage

Add PreCSS to your build tool:

1npm install precss --save-dev

Node

Use PreCSS to process your CSS:

1import precss from 'precss';
2
3precss.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

1npm install postcss --save-dev

Use PreCSS as a plugin:

1import postcss from 'postcss';
2import precss from 'precss';
3
4postcss([
5  precss(/* options */)
6]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

1npm install gulp-postcss --save-dev

Use PreCSS in your Gulpfile:

1import postcss from 'gulp-postcss';
2import precss from 'precss';
3
4gulp.task('css', function () {
5  return gulp.src('./src/*.css').pipe(
6    postcss([
7      precss(/* options */)
8    ])
9  ).pipe(
10    gulp.dest('.')
11  );
12});

Grunt

Add Grunt PostCSS to your build tool:

1npm install grunt-postcss --save-dev

Use PreCSS in your Gruntfile:

1import precss from 'precss';
2
3grunt.loadNpmTasks('grunt-postcss');
4
5grunt.initConfig({
6  postcss: {
7    options: {
8      use: [
9        precss(/* options */)
10      ]
11    },
12    dist: {
13      src: '*.css'
14    }
15  }
16});

Plugins

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

• postcss-extend-rule
• postcss-advanced-variables
• postcss-preset-env
• postcss-atroot
• postcss-property-lookup
• postcss-nested