precsss

!!! This project is a replica of PreCSSS, because PreCSSS is no longer maintained !!!.

PreCSSS

PreCSSS 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;
}

PreCSSS 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 PreCSSS to your build tool:

npm install PreCSSSs --save-dev

or

yarn add -D PreCSSSs

Node

Use PreCSSS to process your CSS:

import PreCSSS from 'PreCSSS';

PreCSSS.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PreCSSS as a plugin:

import postcss from 'postcss';
import PreCSSS from 'PreCSSS';

postcss([
  PreCSSS(/* options */)
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PreCSSS in your Gulpfile:

import postcss from 'gulp-postcss';
import PreCSSS from 'PreCSSS';

gulp.task('css', function () {
  return gulp.src('./src/*.css').pipe(
    postcss([
      PreCSSS(/* options */)
    ])
  ).pipe(
    gulp.dest('.')
  );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PreCSSS in your Gruntfile:

import PreCSSS from 'PreCSSS';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        PreCSSS(/* options */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Plugins

PreCSSS 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