How to get started with PostCSS?

I’ve used preprocessors before, LESS and SASS, with many projects, but now there is another option available: PostCSS.

#What is PostCSS?

Unlike preprocessors like LESS and SASS, which compile non-browser compatible syntax into CSS; PostCSS makes changes to normal CSS. PostCSS is a tool based on Javascript (what is not these days), and relies on custom Javascript plugins that can extend its features. This is nice in that sense, because you don't have to add anything else than what you need for your project.

There are few companies that have already started using PostCSS in their front-end workflow, like Google and Wordpress, for example.

#Can I use variables with PostCSS?

This was also my first question, and the answer is yes. You can also use mixins and nested selectors.

/* Define variables */
:root {
    --color-prim: #D32F2F;
    --color-sec: #1976D2;
    --color-gray: #EEEEEE;
}
/* Using the variables */
a {
    color: var(--color-sec);
}

There is large community behind PostCSS, so you can find quite a lot of different plugins to choose from for your next project. As I'm writing this, there are already over 200 PostCSS plugins available.

#Benefits of using PostCSS

As previously mentioned, PostCSS is very versatile. You only install the plugins that you need, whereas LESS and SASS come with a lot of features included, sometimes features that you don't necessarily need for your project.

Preprocessors don't really give a lot of freedom as, to get new features, you need a newer version. With PostCSS, you have basically endless possibilities to manipulate your CSS.

#Fastest way to get started

The fastest way to get started with is using Codepen.io.

New Codepen project created with PostCSS

Just choose PostCSS as the CSS processor and you are good to go. If you wish to add some plugins for your pen, click to open the available options in the "Need an add on?" section.

#Add PostCSS to your project

Easiest way to add PostCSS to your project is using NPM.

npm install postcss

use

npm install --save-dev postcss

if you want to save it as a dev depency for the package.json

If you don't have Node & NPM installed, there are good guides already available for that:

#Adding plugins

You can add the plugins that you want with NPM as well. I'm using Gulp as my build tool so after isntall I have included them in my gulpfile.js like this:

var cssnext = require('postcss-cssnext');
var pxtorem = require('postcss-pxtorem');
var font = require('postcss-font-magician');

gulp.task('css', function(){
    var processors = [
        cssnext,
        pxtorem({
          propWhiteList: [],
          mediaQuery: true
        }),
        font({
          'Open Sans': {
              '300': ['woff, eot, woff2'],
              '400 italic': ['woff2']
          }
        })
    ];

    return gulp.src('./src/*.css')
        .pipe( postcss(processors) )
        .pipe(gulp.dest('./dist'));
});

Checkout the full starter / practice thingy that I made available on Github PostCSS Practice Repo. It uses gulp and has the gulp webserver so just clone the repo and get to it.

If you prefer to use some other build tool, view all the instructions here.

Written by Mika Kujapelto

Latest Posts