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

    110,757

    Version

    4.0.0

    License

    CC0-1.0

    Unpacked Size

    18.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • jonathantneal