Css pre-processor, post processor, and css Processor

Source: Internet
Author: User

Css pre-processor, post processor, and css Processor

Because I was just getting started with the front-end, I read the knowledge that a great master wrote yesterday, and then I began to search one by one, the following are my search results for css preprocessors and post-processors. First, I would like to share with you the knowledge in this area. On the other hand, I can easily read the results later. For more information, see.

Reprinted from "Zhao Lei's blog", original address: http://zhaolei.info/2014/01/04/css-preprocessor-and-postprocessor/

Speaking of CSS preprocessors, everyone is familiar with it. This article focuses on introducing the CSS post-processor extracted from it, which is also a new trend in the front-end community over the past year.
After the CSS post-processor is abstracted, it will bring some changes to the CSS development mode. The following describes the concept.

CSS Preprocessor

In a broad sense, the target format of the CSS Preprocessor is CSS Preprocessor, but this article specifically refers to the domain-specific language for the ultimate purpose of generating CSS.
Sass,LESS,StylusIs currently the most mainstream CSS Preprocessor.


The following usesLESSFor example:


1234567 . Opacity (@ opacity: 100) {opacity: @ opacity/100; filter :~ "Alpha (opacity =@{ opacity})" ;}. sidebar {. opacity (50 );}

Add the above DSL source code (LESS), Compiled into CSS:

1234 . Sidebar {opacity: 0.5; filter: alpha (opacity = 50 );}

We can see that the language before and after compilation is completely different.

Implementation Principle

In reality, the CSS Preprocessor is a little more complicated, because a large number of functions must support both special DSL and native CSS. One thing is to consider processing in two cases at the same time.


Advantages and disadvantages
  • Advantages: Language-level logical processing, dynamic features, and improved project structure
  • Disadvantages: Special syntax, high coupling of framework, and high complexity
CSS post-Processor


The CSS post-processor is a Preprocessor that processes CSS and finally generates CSS. It is a generalized CSS pre-processor.
We used CSS post-processor a long time ago. The most typical example is CSS compression tools (suchclean-css), But it was not mentioned before.
There are also recent popularAutoprefixerAutomatically handles compatibility issues based on the data supported by browsers on Can I Use.


ToAutoprefixerFor example:

123456 . Container {display: flex;}. item {flex: 1 ;}

Compile the above standard CSS into a compatible production environment CSS:

123456789101112 . Container {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display: flex ;}. item {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1; flex: 1 ;}

We can see that the code before and after compilation is CSS.

If you useSublime Text, You can usePackage ControlInstallAutoprefixerPlug-ins.

Advantages and disadvantages
  • Advantages: CSS syntax makes it easy to modularize and is close to the future standards of CSS.
  • Disadvantage: limited logic processing capability
Development mode changes

The original development mode is as follows:

DSL source code> production environment CSS

Compared with the original version, the biggest change in the new development mode is standard CSS programming. After the compatibility and optimization are handed over to CSS, the processor automatically completes:

DSL source code> standard CSS> production environment CSS

After many future CSS standards are implemented at the CSS post-processor level, some projects can even return to the standard CSS programming mode:

Standard CSS (including future standard post-processor implementation)-> production environment CSS

The following are some simple comparisons:

Item Pre-processor Post processor Use both
Language learning cost DSL CSS √ DSL
Target output result Production Environment CSS Standard CSS √ Standard CSS √
Compatibility processing Coupling High, dependent DSL framework Low, dependent post-processor √ Low, dependent post-processor √
Programmability High, language-level logic processing √ . CSS syntax Extension High, language-level logic processing √

Now I recommend that you use both the CSS Preprocessor and the CSS post-processor to do what they are best.

I think this trend will happen in the future:

  • More and more small CSS tool libraries focusing on a single function
  • The transformation of CSS style library from the overall solution to the Modular Combination Solution
  • Some future CSS standards are supported in the CSS Preprocessor
  • The combination of native CSS and CSS post-processor becomes a new choice
Excellent CSS post-processor framework Rework

ReworkIt is an efficient, simple, scalable, and modular CSS Preprocessor.
It released the first version in September 2012, which isStylusAuthor TJ Holowaychuk.

In fact, he uses the CSS post-processor model, on which there is an imitationStylusTools for style indent nestingstyl, Part of its CSS Preprocessor function is inReworkPasscss-whitespace.
There are someReworkThe Style Library, referring to the CSS standard draft or CSS standard proposal, is equivalent to supporting the CSS future standards, suchrework-vars,rework-font-variant,rework-calc,rework-color-function.

Does it sound dizzy? This shows that its modularization is very good. You can combine CSS frameworks as needed, suchMyth.


  • Directly operate CSS parsing objects in JavaScript to facilitate extension
  • You can freely combine modules and customize the CSS tool library as needed.
  • The model of the CSS post-processor determines its module tendency CSS future standards
  • In addition to servers, it also supports running in a browser Environment

ReworkIt is still very young and requires more time to accumulate.


PostCSSIs a CSS post-processor framework that allows you to modify CSS through JavaScript.
Its first version was released in November 2013, fromAutoprefixerThe framework abstracted from the project.

PostCSSIt has the following features:

  • It andReworkThey are very similar, but they provide more advanced APIs for easier scaling.
  • It can generate a new Source Map based on the existing Source Map.
  • It is better to retain the original CSS format to facilitate the development of editor plug-ins.
  • RatioReworkYounger, onlyAutoprefixerA success story

ActuallyAutoprefixerInitially based onReworkBut later the author had more requirements (the list above) and createdPostCSSThis wheel.


The emergence of the CSS post-processor makes CSS workflows clearer, but they are still far from mature, and there are still many places to do better.

For exampleAutoprefixerOnly make the syntax Prefix level compatible, but also need some small modules dedicated to solving such problems as IE filter compatibility.
For example, CSS Sprites can be automatically classified and merged for images used separately in CSS.
For example, the font size can be automatically optimized based on the project's actual usage of the icon font.

When each module focuses on specific problems, it is more reliable than a large and comprehensive centralized framework in most cases.

You may also considerReworkOrPostCSSWrite a CSS post-processor for fun?

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.