PreCSS
PreCSS lets you use Sass-like markup and staged CSS features in CSS.
;; .menu .menu_link /* becomes */ .menu .menu_link
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:
; precss;
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PreCSS as a plugin:
;; ;
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PreCSS in your Gulpfile:
;; gulp;
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PreCSS in your Gruntfile:
; grunt; grunt;
Plugins
PreCSS is powered by the following plugins (in this order):