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

In this article, the editor introduces in detail "what are the knowledge points of PostCSS and cssnext", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the knowledge points of PostCSS and cssnext" can help you solve your doubts.

PostCSS is the post-processor that uses the javascript plug-in to transform CSS. PostCSS itself won't do anything to your CSS, you need to install some plugins to get started. This not only makes it modular, but also enhances its function.

Cssnext is a CSS transpiler that allows you to use the latest CSS syntax. Cssnext converts the new CSS specification into a more compatible CSS, so you don't have to wait for support from various browsers.

PostCSS works by parsing CSS and converting it into the number of nodes of a CSS, which can be controlled by javascript, and then return to the modified tree and save it. Unlike Sass (preprocessor), you basically compile CSS in a different language.

The difference between preprocessing and post-processing

In order to explain the difference between pre-processing and post-processing in a simple way, take unit conversion as an example. When writing Sass, we can convert it to rem with the function px:

/ * input * /

.selector {margin-bottom: rem (20px);}

/ * output, assuming base font size is 1rem * /

.selector {margin-bottom: 1.25remr;}

This method saves us the time of manual calculation. But through PostCSS, we can do better. Because it's post-processing, we don't need any functions to compile CSS. We can write px directly, and it can be automatically converted to rem.

/ * input * /

.selector {margin-bottom: 20px;}

/ * output, assuming base font size is 1rem * /

.selector {margin-bottom: 1.25remr;}

PostCSS processes the declaration before each PX value appears and runs the calculation, converting it to the value of rem.

New features of cssnext

Cssnext contains a number of new features:

Automatically provide browser prefix support

Custom properties and var () support

Custom property collection and @ apply support

Simplified, more secure calc ()

Customizable media query

Media query scope

Custom selector

Nesting

Image-set ()

Color ()

Hwb ()

Gray ()

Rrggbbaa Color

Downgrade scheme of rgba ()

Rebeccapurple Color

Font-variant attribute

Filter attribute

Inital value

The downgrade scheme of rem units

: any-link pseudo-class

: mathces pseudo-class

: not pseudo-class

Degraded scheme of pseudo-element syntax

Downgrade scheme of overflow-wrap attribute

Case-insensitive attribute

Enhanced rga ()

Enhanced hsl ()

Sysem-ui font

Automatically provide browser prefix support

Automatically add (and remove outdated / useless prefixes), implemented by autoprefixer

Custom properties and var () support

The current transformation of custom properties is designed to provide a future-oriented new feature provided by native CSS custom properties that is limited to the root selector.

Use properties:

: root {

-- mainColor: red

}

A {

Color: var (--mainColor)

}

Custom property collection and @ apply support

Allows you to store a set of variables in named custom properties and then reference it in other type rules.

: root {

-- danger-theme: {

Color: white

Background-color: red

}

}

.danger {

@ apply-- danger-theme

}

Simplified, more secure calc ()

Use optimized preparsing var () references to allow you to use custom variables more safely with calc ()

: root {

-- fontSize: 1rem

}

H2 {

Font-size: calc (var (--fontSize) * 2)

}

Customizable media query

A better way to realize semantic media query

@ custom-media-small-viewport (max-width: 30em)

/ * check out media queries ranges for a better syntax! * /

@ media (--small-viewport) {

/ * styles for small viewport * /

}

Media query scope

Allow = to replace min and max

@ media (width > = 500px) and (width = 500px) and (width

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.