Web Development – CSS Preprocessing (SASS or LESS) vs CSS Postprocessing

cssweb-development

So I stumbled across some frameworks for doing CSS post processing such as pleeease.io and I was wondering what are some main benefits or use cases for using CSS post processing? I feel you can achieve more or less the same thing with preprocessing mixins/functions. How are they used in conjunction with preprocessing languages like SASS or LESS?

Best Answer

The difference between postprocessing and preprocessing is non-existent, at least in the case of programming languages. Both describe a transformation from some format A (which is authored by a human) to format B (which is necessary to have, but inconvenient to write):

“compiler”:   A    -> B

== CSS-related examples ==
less:         LESS -> CSS
sass:         SASS -> CSS
sass:         SCSS -> CSS
autoprefixer: CSS  -> CSS
minifier:     CSS  -> CSS
pleeease:     CSS  -> CSS

== Other examples ==
c preprocessor: C        -> C without macros
gcc:            C        -> machine code
pandoc:         LaTeX    -> HTML
pandoc:         Markdown -> HTML
pandoc:         LaTeX    -> Markdown

A few observations on those examples:

  • The input and output format can be the same. This is the case in code tidiers, minifiers, and other processors that somehow simplify the source. E.g. the C preprocessor expands macros and constants in the source code. This is equivalent to autoprefixer, which expands unprefixed CSS directives into their prefixed variants.

  • Processors can involve multiple sub-processors that each do some part of the transformation.

    • pleeease can pipe the code through various processors such as autoprefixer or a minifer.
    • A C compiler includes a preprocessor stage.
    • Pandoc has a processor that parses the input (e.g. a Markdown document) into a common data structure, then passes this intermediate representation to another processor that turns it into the target format (e.g. HTML). Pandoc's architecture is fairly pluggable, and allows additional preprocessing stages to be added. For example, this is used to implement bibliography references in Pandoc's Markdown dialect, by expanding the syntax into a more standard Markdown form.

If pleeease calls itself a post-processor rather than a pre-processor, this is done …

  • to differentiate itself from preprocessors like LESS or SASS. The selling point of LESS and SASS/SCSS is that they extend or replace CSS syntax. Pleeease instead wants to make existing CSS code more portable.
  • to indicate pleeease is to be used after development. If you use SASS to write your styles, you have to run the compiler before you serve the style sheet to your browser. And after you've written the style, you can run pleeease on the result to make it more palatable to older browsers.

To summarize: There is no technical reason to differentiate between preprocessing and postprocessing in the realm of programming languages. The term “postprocessing” is not widely used in this domain, and one should therefore substitute and prefer “preprocessing”, “compiling”, or “transformation”.

Related Topic