SASS is very popular and is one of the most well-known and used CSS pre-processors. However, it is always relevant to question our knowledge and to be open to the alternatives available on the market. That's why we propose a comparative analysis between SASS and POSTCSS in order to find out which technologies are best to adopt.
Let's start at the beginning! In order to make the comparison, let's first define the concepts.
What is SASS?
SASS is a language that makes it easier to write CSS. SASS contains several elements that make it easier and faster to write CSS without having to repeat yourself too much. For example, variables that avoid having to specify code multiple times (e.g. font-family that is repeated in multiple places), or extends for sections that are similar. SASS is a solid, mature language and is one of the most used CSS pre-processors. To learn more about SASS, see this article.
What is POSTCSS?
PostCSS is a tool designed in Javascript that allows you to read a CSS file written with a different syntax and then convert it into real CSS. Like SASS, it is used to make writing CSS faster, easier and more modular. However, unlike SASS which already does everything, POSTCSS, by itself, does nothing. In fact, POSTCSS is included with several plugins that you can install. In other words, you can think of it as a bit of a DIY SASS!
Just like SASS, POSTCSS works with :
- Gulp
- Webpack
- Grunt
- etc...
What are the main differences?
The main difference between the two technologies is that, unlike SASS, POSTCSS offers us more flexibility. Indeed, it is possible to customize it with the many plugins available. It is also possible to create new ones easily.
However, since POSTCSS can be customized, many projects can be designed differently. This makes the learning curve of POSTCSS slower for developers and, as a result, the set up of projects can be more complex.
What are the advantages of POSTCSS?
The main advantage of POSTCSS is that it is 100% customizable. This offers more control over the tool. Also, since the developer manually chooses his features and has to integrate them himself, he knows how to use it well. On the other hand, with SASS, if the developer misunderstands the features, the generated CSS can be unoptimized and repetitive (e.g. misuse of mixins).
What are the disadvantages of POSTCSS?
Unfortunately, with all these plugins, maintenance becomes more complex. The plugins set up depend on a third party, so there is a chance that one day, they will not be maintained / supported anymore. Also note that there is a possibility of conflict between plugins and that some of them must respect a specific order when they are added to the project. However, this order, as well as conflicts, will be detailed in the plugin documentation.
Examples of POSTCSS plugins
As mentioned above, there are POSTCSS plugins for each of the SASS features. However, they are not included by default. Therefore, you have to install them manually.
Here are some examples:
- Autoprefixer, add prefix for compatibility = -webkit- or -o or -moz-: https://github.com/postcss/autoprefixer
- Clean, minify the CSS: https://github.com/leodido/postcss-clean
- Cleaner, remove unused CSS: https://github.com/tbekaert/postcss-cleaner
- Hocus: https://github.com/kilian/postcss-hocus
- Russian stylesheet: https://github.com/Semigradsky/postcss-russian-stylesheets
- You can also see the full list of plugins here: https://www.postcss.parts/
But finally, which one should we choose?
Obviously, like all technologies, each alternative has advantages and disadvantages. We just have to see how we want to enhance the experience of the developers in writing CSS, the time we can allocate to do maintenance, the expertise of the developers who will be mandated on the projects, etc. In the case of SASS and POSTCSS, both have roughly the same utility. At this point, it is a matter of taste.
Still hesitating?
Did you know that POSTCSS and SASS can be used at the same time on the same project? So you can continue to use SASS, while taking the best of POSTCSS!