PostCSS and cssnext syntax

 What is postcss

postcss a tool for css compilation, similar to babel’s handling of js, common features such as:

 1 . Using next-generation css syntax

 2 . Auto-completion of browser prefixes

 3 . Automatically convert px generation to rem

4 . css code compression, etc.

postcss is just a tool, itself will not be a css meal operation, it through the plug-ins to realize the function, autoprefixer is one of them.

Difference with less sass

less sass is 预处理器 and is used to support extended css syntax.

postcss is neither a preprocessor nor a postprocessor, it is more versatile, and importantly, postcss can be used in conjunction with less/sass.

 About the trade-offs

Although it can be used in conjunction with less/sass, they still have a lot of duplicate functionality, and using one of them is basically ok.

 The following is a personal summary:

• 
  postcss encourages developers to write source code using the canonical CSS native syntax to support future css syntax, just as babel supports ES6, and higher versions of Google Chrome already support some of the syntax

• 
  less, sass extends the native stuff, it treats css as a subset, which means it’s more powerful than native, but sooner or later it will duplicate native functionality, such as css variable definitions high versions of google already support, and js now require and import .

•  Can be used in combination

 Not much difference at this stage, depends on personal preference

 How to use

We’re only talking about integration in webpack, which requires the loader first.

 1 . Installation

cnpm install postcss-loader --save-dev

2 . Webpack Configuration

Generally used in conjunction with other loaders, the following * marked part of the postcss to use the

 Pay attention to the order of loaders when fitting (start loading from the bottom)

rules: [
    {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'style-loader',
            },
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 1,
                }
            },
            {//*
                loader: 'postcss-loader'
            }
        ]
    }
]

3 . Postcss Configuration

Create a new postcss.config.js file in the root directory of the project, all the plug-ins used need to be configured here, the empty configuration item when configuring the xx:{}

module.exports = {
  plugins: {
    'autoprefixer': {
        browsers: '> 5%'  
    }
  }
}

  Note: It is also possible to configure the webpack

 Commonly used postcss plugin

autoprefixer

 Prefix Completion, fully automated, needless to say

 Installation: cnpm install autoprefixer --save-dev

postcss-cssnext

Use the next version of css syntax, see cssnext (css4) syntax for syntax

 Installation: cnpm install postcss-cssnext --save-dev

Don’t forget to configure it at postcss.config.js : 'postcss-cssnext':{}

cssnext contains autoprefixer , both install will report an error as follows:

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.

postcss-pxtorem

 Convert px to rem

 Installation: cnpm install postcss-pxtorem --save-dev

 Configuration item:

{
    rootValue: 16,  
    unitPrecision: 5,  
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'], 
    selectorBlackList: [], 
    replace: true,
    mediaQuery: false,  
    minPixelValue: 0  
}

  Special Tip: Not converting to rem

The px detection is case-sensitive, which means that Px/PX/pX will not be converted, and can be used to avoid converting rem

 Relevant information: Official website

 cssnext (css4) syntax

cssnext and css4 are not the same thing. cssnext uses the draft syntax of the next version of css.

 Custom Properties

 Equivalent to a variable, the benefits of variables are obvious, reusing the

 1 . Definitions

 Define a css property at :root selector

:root{
	--mianColor:#ffc001;
}

2 . Use

 Calling Custom Properties with var(xx)

.test{
	background: var(--mianColor);
}

 .test{
	background: #ffc001;
}

  For example, avoid copying and pasting colors when it comes to the use of colors on your website

 Custom Attribute Sets

 Multiple attributes in one variable

 1 . Definitions

Define a css property set at :root selector

:root{
	--fontCommon:{
		font-size:14px;
 	};
}

2 . Use

 Calling property sets using @apply xx

.test{
	@apply --fontCommon;
}

 .test{
  font-size:14px;
 }

  sizing

 Typically used for px rem, etc.

 Grammar: cale( )

/*css3*/
.test {
	width: calc(100% - 50px);
}
 :root {
  --fontSize: 1rem;
}
h1 {
    font-size: calc(var(--fontSize) * 2);
}

 .test{
	font-size: 32px;
	font-size: 2rem;
}

  Custom Defined Media Queries

 1 . Definitions

 grammatical @custom-media xx (条件) and (条件)

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

In addition, css4 can use >= and <= instead of min-width and max-width.

 2 . Use

@media (width >= 500px) and (width <= 1200px) {

}
@media (--small-viewport) {

}

 @media (min-width: 500px) and (max-width: 1200px) {

}
@media (max-width: 30rem) {

}

  Customizable Selector

 1 . Definitions

 Grammar: @custom-selector :name selector1, selector2;

 There must be a space after @custom-selector.

@custom-selector :--test .test1,.test2;

2 . Use

 Grammar: :name

:--test{
	color: #fff;
}

 .test1,
.test2{
	color: #fff;
}

  Note: Use with pseudo-classes to combine with each other

@custom-selector :--test .test1,.test2;
@custom-selector :--testClass :hover,:focus;
:--test:--testClass{
	color: #fff;
}

 .test1:hover,
.test2:hover,
.test1:focus,
.test2:focus{
	color: #fff;
}

  selector nesting

 With nesting support, the css code is less cluttered and it is easy to

 1 . Direct Nesting

 vocabulary &

.test {
    & span {
        color: white;
    }
}

 .test span {
	color: white;
}

2 . Specify how to nest

 Syntax: @nest ... & ... ,&specify location

a {
    @nest span & {
        color: blue;
    }
}

 span a {
  color: blue;
}

3 . Automatic nesting (in media queries)

 Media queries are automatically nested within the internal

.test {
    @media (min-width: 30rem) {
        color: yellow;
   }
}

 @media (min-width: 30rem) {
	.test {
		color: yellow;
	}
}

image-set() image sets different values depending on resolution

 Infrequent use, follow up additions

 color() Adjusts the color

For example, use color(value alpha(percentage)) to adjust the color.

.test {
  color: color(red alpha(-10%));
}

 .test {
  color: rgba(255, 0, 0, 0.9);
}

font-family new-value-added system-ui

  system-ui Uses all system fonts as backup fonts

body {
  font-family: system-ui;
}

 body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
}