Nerds Publishing Monstrosities
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

precss

3.1.2 • Public • Published

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

install

npm i precss

Downloadsweekly downloads

80,098

version

3.1.2

license

CC0-1.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar