What are the best CSS preprocessors/postprocessors?

CSS preprocessors are extension languages that compile into CSS. They add functionalities to CSS such as variables, mixins and nested inheritance. The added features depend on that specific preprocessor.

CSS preprocessors result in cleaner, easier to read code that’s faster to edit than pure CSS. Another major benefit is that preprocessors feature ways to write reusable code blocks, helping developers adhere to the principle of DRY (don’t repeat yourself) programming.

CSS postprocessors parse plain CSS (for example: to include vendor prefixes).

When choosing the best option for your project, consider the community. A large, active community will make it easier to get support and will provide more learning resources. Consider how detailed and well-written the documentation is. Is the information organized well and are enough examples provided? Check to see if it’s actively developed for bug fixes and new features.

Why do you recommend Sass?

Why do you not recommend Sass?

Sass provides two syntax options - Sass, which omits the use of semicolons and brackets, and SCSS, which is written like vanilla CSS with added featu...

Powerful advanced function features

2
You are able to declare custom functions with Sass (for example, converting units) which can be easily invoked, even when using shorthand properties....

Compass framework provides added features

2
Sass can be used with a framework called Compass, which provides additional functions and mixins which can reduce the amount of code you have to writ...

Requires Ruby or libSass

1
Sass compiles in Ruby. To run the code locally, the use of a library (libSass) is requires.

Why do you recommend Less?

Why do you not recommend Less?

Less is a great choice if you want the majority of the benefits of a CSS preprocessor without having to learn a new syntax and advanced features.Less...

Easy to learn

Because Less has a lightweight feature set, is syntactically similar to CSS and can be run client side with file conversion on a page reload, it is...

Familiar CSS style syntax

The LESS syntax is essentially the same as CSS with extensions for dynamic behavior such as variables, mixins, operations and functions.Variables:@co...

Less uses '@' to declare variables

The '@' symbol is used with Less to declare variables. However '@' already has meaning in CSS, as it is used to declare @media queri...

Why do you recommend Stylus?

Why do you not recommend Stylus?

Compared to its competition, Stylus has a superior feature set and an optional, incredibly terse syntax.

Clean, flexible syntax

2
Stylus has an extremely terse syntax. Colons, semicons and braces are all optional allowing you to write Stylus code however you want. hover-darken(...

Transparent mixins

One of Stylus' distinguishing features is transparent mixins: reusuable, possibly dynamic styles that look exactly like native CSS properties. Th...

Not as mature as Less and Sass

Stylus is younger than both Less and Sass, and not yet at the same level of popularity. As a result, Stylus currently has a smaller and less active c...

Why do you recommend PostCSS?

Why do you not recommend PostCSS?

PostCSS is compilation step for your CSS that supports a variety of plugins for everything from CSS4 syntax support to minification and fallback gene...

Speed

PostCSS is 3-30 times faster than Sass (including libsass), Less, and Stylus

Real CSS syntax

Rather than learn a different syntax, PostCSS allows you to write in pure CSS.

Lack of support in IDEs

Currently there is very little support for syntax highlighting when writing PostCSS plugins.

Why do you recommend Stylecow?

Why do you not recommend Stylecow?

Stylecow is a post-processor that allows to write in pure CSS, so you don't need to learn another syntax. It provides a lot of plugins to bring s...

Easy to install and use

It's written in node, so you can install it with npm. All available plugins are installed by default and include some development tools like a wa...

Advanced API and parser

The parser detects any CSS syntax error found. The output code can be customized to follow your own code style rules (indentation, spaces, string quo...

Young project, small community

Stylecow is a young processor which does not yet have an active community of users. This can make it difficult to find answers and increases the risk...

Why do you recommend Rework?

Why do you not recommend Rework?

Rework is designed to extend the functionality of vanilla CSS.

Built around plugins

Rework isn't a language for compiling to CSS but rather a library around parsing it and transforming it. For example, a vendor prefix plugin will...

Extend native properties

Through transforms you can modify existing properties to give them new attributes and options, so instead of managing messy mixins, you can add a sim...

Difficult for beginners

Rework has a more involved setup that can make it an intimidating first option for beginners to css processing. As Rework is built around plugins, t...

Why do you recommend CSS-Crush?

Why do you not recommend CSS-Crush?

Implemented in PHP

PHP is used in common platforms such as Drupal and Wordpress, which results in CSS-Crush being easy to integrate with most development stacks.

Out of the box vendor prefixing

Rather than require a plugin, CSS-Crush will automatically add vendor prefixes.

Not widely used

CSS-Crush is not a widely used option. The small community of users results in a harder time finding answers to any questions you may have.

Why do you recommend CSS-On-Diet?

Why do you not recommend CSS-On-Diet?

CSS-On-Diet is a preprocessor created with designers in mind. It's main feature is shortened keywords to make writing CSS more efficient.

Fast to read and write CSS

Works like Emmet, shorting CSS keywords, but it's not limited only to writing. Also modifying and reading COD(CSS-On-Diet) files is faster.

Easy to learn and use

Doesn't require programming skill to work with variables, mixins, media breakpoints

It's difficult adjusting to different keywords

The keywords are shortened to 3 letters. For example, "background-color" becomes "bac" and "max-width" becomes "ma...

Are we missing something?

Help make this question more complete.