What is the difference between the preprocessors and postprocessors?

The whole point of one picture:


Preprocessors make all sorts of stuff like SCSS to CSS.
Post processors "improve" ready made CSS (autoprefix, for example).
And Yes, you can collect to customize this toolchain that will do all these manipulations in a single pass.

The preprocessor significantly expands opportunities and provides more convenient syntax. The preprocessor accepts the data(your code stylus/sass/less) and gives (compiles to css)
A post - processor works with the css itself (post-processing - post-processing) for example framing vendorname prefixes.

In General, they need to combine for example
Please write stylus code

.container box-sizing border-box

it is compiled in

.container { box-sizing: border-box; }

next, we use the postprocessor(autoprefix) and obtain

.container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }