Skip to content
Use Sass-like markup in your CSS
CSS JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 9556604 Nov 23, 2018

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 4.0.0 Nov 23, 2018
test 4.0.0 Nov 23, 2018
.editorconfig Update plugin organization Jun 29, 2017
.gitignore
.rollup.js 4.0.0 Nov 23, 2018
.tape.js 4.0.0 Nov 23, 2018
.travis.yml 4.0.0 Nov 23, 2018
CHANGELOG.md 4.0.0 Nov 23, 2018
CONTRIBUTING.md 3.0.0 Jan 17, 2018
LICENSE.md 3.0.0 Jan 17, 2018
README.md
package.json 4.0.0 Nov 23, 2018

README.md

PreCSS PostCSS Logo

NPM Version Build Status Support 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: $blue;
  width: $column;
}

/* becomes */

.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 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):

You can’t perform that action at this time.