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