PostCSS becomes more and more popular these days. And yeah, why should we develop in these weird file extensions for Sass, Scss or Less. With PostCSS, we just stick to CSS extensions.
That’s what I love about PostCSS! There are currently loads of plugins for to do the same magic as we were used to in Sass/Scss! PreCSS is my favorite! You can use Variables, Conditionals, Loops, Mixins, Extends, Imports, Property lookup, Root and so much more! Autoprefixer and Color functions are also very cool!
You can choose your favorite tool/task runner to handle PostCSS. Gulp, Grunt, PostCSS CLI, NodeJS. But more and more people want to stick to NPM scripts, people like me!
I like the idea to do everything with NPM scripts. Just use your already created package.json, drop in your CLI commands in the scripts object, and of we go!
Let’s create a package.json (if you didn’t have that already) with
Start with a few commands to install the dependencies:
npm install postcss normalize-css precss --save-dev. And install
postcss-cli globally on your system:
npm install postcss-cli.
After the installation create a CSS file (
style.css) in a folder
On the first rule of the CSS file set this @import:
Let’s create an
Add this content to the postcss-options file: