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.
Add PreCSS to your build tool:
npm install precss --save-devUse PreCSS to process your CSS:
import precss from 'precss';
precss.process(YOUR_CSS);Add PostCSS to your build tool:
npm install postcss --save-devUse PreCSS as a plugin:
import postcss from 'postcss';
import precss from 'precss';
postcss([
precss(/* options */)
]).process(YOUR_CSS);Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devUse 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('.')
);
});Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devUse PreCSS in your Gruntfile:
import precss from 'precss';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
precss(/* options */)
]
},
dist: {
src: '*.css'
}
}
});PreCSS is powered by the following plugins (in this order):
