npm

Need private packages and team management tools?Check out npm Orgs. »

precss

4.0.0 • Public • Published

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

install

npm i precss

Downloadsweekly downloads

254,344

version

4.0.0

license

CC0-1.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability