Will PostCSS Replace SASS And Other CSS Preprocessors?

PostCSSCSS has numerous limitations. You can build any website it’s possible to imagine in CSS (with the addition of various other technologies), but CSS doesn’t make life easy for developers. It’s too easy to make mistakes, to build massively complex style sheets that are a nightmare to maintain, and to end up with a mess that no designer can properly get their head around.

Tools like SASS were created to mitigate some of the problems with CSS. They add features like mixins, variables, and mathematical notation that make it easier to write elegant and maintainable stylesheets which can then be processed into valid CSS browsers can understand.

PostCSS is an attempt to achieve the same ends as tools like SASS, but it comes at things from a slightly different perspective, particularly with regard to how it is designed.

PostCSS itself is a small tool that takes CSS and creates a syntax tree. In itself, that’s not especially useful. The useful part is the huge plugin ecosystem that leverages PostCSS to add features to CSS. PostCSS is a modular system; developers choose the functionality they want from a long list of plugins. This differentiates PostCSS from SASS, Stylus, and other monolithic CSS pre-processors — if you want SASS variables in your CSS, you have to take everything else that comes along with SASS, even though you may never use it.

PostCSS plugins are numerous, and they’re easy to write for any developer with a modicum of JavaScript under their belt.

Which brings us to the other major difference between PostCSS and SASS and friends. PostCSS and its plugins are written in JavaScript, or rather, they’re written in Node.js. That means PostCSS and its plugins can be managed with npm. In many ways, PostCSS can compared to Gulp, with which it integrates very nicely.

Let’s take a quick look at a simple example of using PostCSS to solve a problem. There are various ways to use PostCSS, but I’m a Gulp user, so I’ll demonstrate how PostCSS and Gulp can be integrated. If you aren’t familiar with Gulp, take a look at our recent article on using Gulp to improve web performance.

Autoprefixer is one of the most popular PostCSS plugins. In essence, it lets us write CSS without regard for vendor prefixes, which are added automatically. We write the following CSS:

.myclass {
hyphens: auto;
}

Autoprefixer will modify it to read:

.myclass {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

To use Autoprefixer, you first need to be set-up with Gulp and then install the following modules:

npm install gulp-postcss autoprefixer —save-dev

Next, we add a Gulp task to process our CSS and send it through PostCSS. To do so, we can add the following to our gulpfile.js:

var autoprefixer = require('autoprefixer');

gulp.task('css', function () {
var processors = [
autoprefixer
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});

If you’re familiar with JavaScript or gulpfile syntax, this should be fairly easy to understand. Note that we add “autoprefixer” as an option in the “processors” array.

Other PostCSS plugins can be added in the same way, and there’s a huge range — PostCSS can replicate the functionality of SASS and more, including some tasks that you’d ordinarily use Gulp alone for, and some that have been very difficult to achieve in the past, including the ability to use “future” CSS with plugins like CSSNext.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED