Shulou(Shulou.com)06/03 Report--

This article introduces what the CSS precompiler PostCSS is like, the content is very detailed, interested friends can refer to, hope to be helpful to you.

When it comes to the css precompiler (css preprocessor), you may think of Sass, Less, and Stylus. The PostCSS introduced in this article is just such a tool: what the css precompiler can do, it can do the same.

"I understand everything you say, so why use it?"

Suit and single piece

If precompilers such as Sass define a new template language and then convert it to css, PostCSS is more purely transforming css itself.

Think back to how you learned to use the css precompiler: you learned that there is a language that can be converted to css, which has many features, variables, nesting, inheritance, and so on, each of which is implemented through a certain syntax. It's probably like handing you a packaged toolbox (mass production? You can find something useful in it.

What about PostCSS? PostCSS is like handing you a box, but telling you that you can take the tools you want from the display cabinet next to you and put them in a box and pack them with you. If you don't think the display case is good enough, PostCSS can also help you build your own tools. So, with PostCSS, you can just fetch what you need.

This is the modular style of PostCSS. As a css transformation tool, it is very small, and all of its transformation functions are plug-ins, so it can be customized and configured.

Brief principles of PostCSS

PostCSS itself includes only css parsers, css node tree API,source map generators, and css node tree splicers.

The constituent unit of css is a style rule (rule), each of which contains the definition of one or more attributes & values. Therefore, the execution process of PostCSS is that first the css analyzer reads the css character content to get a complete node tree, then a series of conversion operations are carried out on the node tree (based on the node tree API plug-in), and finally, the transformed node tree is recomposed into css characters by the css node tree splicer. During this period, a source map can be generated to indicate the character correspondence before and after the conversion:

Interestingly, the plug-ins for PostCSS are actually JavaScript functions that use PostCSS's node tree API to transform the css node tree differently.

Plug-in preview

All plug-ins can be found on the home page of PostCSS, and only a few of them are selected here.

Autoprefixer

The most famous plug-in for PostCSS is Autoprefixer. As the name suggests, you can automatically add a browser private prefix for you. Its added value will refer to Can I Use and the browser support range you set, so it is quite reliable. The following is an example (with the scope of browser support I set):

CSS Code copies content to the clipboard

.container {

Display: flex

}

After compilation:

CSS

.container {

Display:-webkit-box

Display:-webkit-flex

Display:-ms-flexbox

Display: flex

}

Postcss-nested&postcss-mixins

When I first started using PostCSS, I thought of using PostCSS to implement my most commonly used features in Sass. So, I found postcss-nested and postcss-mixins. When you combine them, you can do this:

CSS Code copies content to the clipboard

@ define-mixin clearfix {

&: after {

Display: table

Clear: both

Content: ""

}

}

. column-container {

Color: # 333

@ mixin clearfix

}

After compilation:

CSS Code copies content to the clipboard

. column-container {

Color: # 333

}

. column-container:after {

Display: table

Clear: both

Content: ""

}

At this point, do you already have the feeling that "it can be done by a precompiler?"

How to use PostCSS

I personally recommend it in conjunction with Gulp, and this article only introduces the use of gulp-postcss.

Gulp-postcss and plug-ins are both npm. First, install them separately into the project directory using npm install (which will be located in node_modules). Then, edit the glupfile.js to register PostCSS as a task for Gulp. The following is an example of generating a source map file using a combination of Autoprefixer, postcss-simple-vars, postcss-mixins, and postcss-nested4 plug-ins:

CSS

Var gulp = require ("gulp")

Var postcss = require ("gulp-postcss")

Var autoprefixer = require ('autoprefixer-core')

Var postcssSimpleVars = require ("postcss-simple-vars")

Var postcssMixins = require ("postcss-mixins")

Var postcssNested = require ("postcss-nested")

Var sourcemaps = require ("gulp-sourcemaps")

/ / Css process.

Gulp.task ("postcss", function () {

Var processors = [

PostcssMixins

PostcssSimpleVars

PostcssNested

Autoprefixer ({

Browsers: ["Android 4.1"," iOS 7.1", "Chrome > 31", "ff > 31", "ie > = 10"]

})]

Return gulp.src ([". / stylesheets/src/*.css"])

.pipe (sourcemaps.init ())

.pipe (postcss (processors))

.pipe (sourcemaps.write ("."))

.pipe (gulp.dest (". / stylesheets/dest"))

});

In the above code, processors is an array that defines the PostCSS plug-ins used. PostCSS executes the plug-ins in the order in which they are defined, so when using multiple plug-ins, pay attention to their location.

Custom conversion

In addition, you can easily create your own transformations (remember that PostCSS plug-ins are all JavaScript functions? ). For example, here is a custom conversion method that changes the value with rem units in the css code to the value of px.

CSS

Var custom = function (css, opts) {

Css.eachDecl (function (decl) {

Decl.value = decl.value.replace (/\ dcast remand, function (str) {

Return 16 * parseFloat (str) + "px"

});

});

}

Then, you can add this method directly to processors (like those in postcssMixins) and you can use it. If the original value is 3rem, it will become 48px.

The above is just a simple transformation, if you want to formally do a plug-in, please refer to the PostCSS plug-in guide.

Performance

PostCSS claims that PostCSS written by JavaScript is three times faster than the libsass written by C++ (Sass was originally written by Ruby, but later came out of C++ 's engine, libsass, which is faster). I think the specific figures here do not need to care much, you can feel that "the running speed of PostCSS" is enough.

It actually works something like this:

Do more.

Based on PostCSS, you can do many things that existing css precompilers cannot. For example, the plug-in series cssnext allows you to use the syntax of CSS4+ (adding variables and many other features), which will help you convert to the currently available CSS3.

A little bit of a problem

The problem with PostCSS is that it is fragmented, so I can't find an editor that correctly parses and highlights css code that is ready to use PostCSS. For example, in WebStorm I think of it as a normal css file, and I get a lot of red error messages as a result.

So, is the css precompiler out of date?

Of course not. Like other popular frameworks and tools, the css precompiler is a proven and available tool that we can choose according to our needs.

Css precompilers such as Sass are mature and reliable. On the one hand, they are already popular template languages, with well-documented and peripheral support, relatively stable, and easily understood by newcomers to the team. On the other hand, the integrated style has its convenience, just like you may not bother to assemble a model, but you can find a professional to do it for you.

PostCSS is characterized by modularity. In the long run, PostCSS can do more types of css conversions. The customizable style is very suitable for people who pursue personality (faster and can make their own interesting plug-ins).

In addition, the css precompiler and PostCSS can be used together. A popular use is to compile Sass and then connect to PostCSS's Autoprefixer (after all, this is PostCSS's signature plug-in).

Conclusion

The style of PostCSS can be said to be creating an ecosystem that changes the way css is developed. So when it comes to the future, I'm still looking forward to it.

This is how the precompiler PostCSS of CSS is shared here. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.